Apply colour mask overlay to image that honours transparency using HTML5 Canvas - javascript

I'm creating an arcade game using Javascript that draws to a 2D Canvas context.
To simulate 'pain' in sprites that have been shot I want to have them flash orange.
I currently draw the image to the canvas using ctx.drawImage().
Rather than create more artwork to apply the 'in pain' effect I'd like to use Javascript.
I've researched globalCompositeOperation but as yet can't find a solution.
Here is the original image drawn to the canvas over the scrolling background graphic:
In theory I'd like to then apply a rectangular orange area using fillRect():
The effect that I'm after is this:
Not this:
Does anybody know if this is possible?

Related

html 5 canvas custom shapes without css

Is it possible in html5 canvas to create custom shape canvas like circle, star, rounded corners etc. What I'm talking about here is the main canvas itself not the contents. I already searched for answers and results are by using css. By default canvas is rectangle I want to make it custom shape. I hope this is possible.
Thanks

Creating an X-ray vision effect on an image HTML5 [duplicate]

If I change the cursor of a page into a 'flashlight' (say, a circle), and I want to reveal an image only when passing the light (the circle) over it, what would be the best way to go about this? Using css clip? But then it can only do rectangles, so I'd have to use canvas? Perhaps there's an easy way to intersect the two images?
You can do this with a canvas easily.
Here's an example:
http://jsfiddle.net/gfZ5C/
On every mouse move, we clear the canvas, redraw the image, make a clipping region that is a circle cut out of a rectangle, and draw black on the entire canvas (which will draw only on the clipping region)
Make sense?
There are a lot of ways to achieve this effect and similar effects. You can also make much fancier light sources with a bit of canvas sorcery. See for instance my answer here: Canvas - Fill a rectangle in all areas that are fully transparent

Using Javascript is there a way to grab the background image rendered by a linear or radial gradient?

I'm specifically interested in gradients but I suppose the question applies to images rendered with any method, such as data:image/svg+xml;...
Is it possible?
ETA:
This was possible by rendering the gradient onto a canvas. For anyone interested in saving a .png of a CSS3 linear or radial gradient, go to:
http://www.visualcsstools.com/gradient-generator.htm
Design your gradient, click the CVS (canvas) button and right-click the gradient preview to save it as an image.
A DOM element with a CSS gradient background, no way to do that without a screen shot utility.
However, if you drew a gradient in a canvas element (and any other graphics in the canvas element), you could export the graphic of the canvas element as a JPG or PNG using JavaScript in the browser. See this question.
By taking a screenshot perhaps?

Setting a transparent color in HTML5

Is it possible to set a transparent color for images loaded in HTML5?
I would be looking for something similar to the setColorKey() function available in SDL. This would be used to easily remove a background from some sprite sheets that I will be using.
There is no very straightforward way to do this, but you can use the <canvas> tag to do this.
Draw your image in the canvas, using drawImage, and then use getImageData and putImageData to perform pixel manipulation on it.
There are some examples of pixel manipulation in canvas here: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes
There is no built in function for this. If this doesn't need to be dynamic, then you could remove the color from the original image and make those areas transparent. Then you put the images in a div that has the background color that you just removed from the image. After that you change the background color of the div when you mouse over the image.
If that sound like the right idea and you need some starter code let me know.

Creating a Path/Imagemap from a Transparent PNG with Raphael JS

I'm working on a Raphael JS project and need to display some transparent PNGs with only the parts that are non-transparent to be clickable. Is there a way to:
Upon mouse click, pull out the alpha of the current position.
or
Generate a path which can be be used to define the clickable region (i.e. http://raphaeljs.com/australia.html)
As raphael is for vector graphics, it is the wrong tool for your problem with png. I think canvas is what you looking for. Load your image in an canvas (the canvas doesent need to be pushed in the DOM). On click check the coords and get the pixel out of the canvas.
But maybe it will be easier to convert you png to vector graphics and use raphael instead.

Categories