HTML5 Canvas and globalCompositeOperation
Scratch out the color!
[The demo is the fun part, so just click here now, then come back if you want to know more about the subject. Next time I'll just send people there, and link back to the lengthier description in the blog. Sorry!]
I haven’t had much time to post lately, but I saw a cool little “scratch off” app go by on Hacker News that I thought could be improved upon by using something in HTML5 canvas known as the “globalCompositeOperation“. So I coded up a demo to show it off.
The globalCompositeOperation affects how canvas drawing routines interact with the data that’s being drawn upon. There are many different operations, but the default is "source-over", which the spec says: “Display the source image wherever the source image is opaque. Display the destination image elsewhere”, which makes a certain kind of sense for what you usually want to do.
Another common mode is "copy", which ignores transparency. As the spec says for “copy”: “Display the source image instead of the destination image.”
But, in fact, there are plenty of modes. And some of them are better-supported than others. For this demo, for example, I wanted to use "source-out". Chrome and Safari seemed to be OK with it, but Firefox just left the canvas blank—not too useful. So instead I fell back on using "source-atop", which I also made to work.
(A completely different approach to this entire problem might be to record the path you’ve drawn and use the clip() method to mask out the image, but I have doubts that would be faster.)
Without further ado, here is the demo.
Howdy. Your getLocalCoords function can be a bit simpler. I’m looking at the initialization. I think, if <body onload=”…”> is used, the loading can be simplified. I’ll get back. Ciao – Mark Filipak.
function getLocalCoords(elem, event)
{
var ox = elem.offsetLeft, oy = elem.offsetTop;
while ((elem = elem.offsetParent) != null)
{
ox += elem.offsetLeft;
oy += elem.offsetTop;
}
return {‘x’ : event.pageX – ox, ‘y’ : event.pageY – oy};
}
Hi
I’ve been looking for an html5 solution to replace Flash for our promotional scratchcards (no gambling!). Looks like you’ve cracked the main part of the problem. Are you still doing any work on it? If not would you be willing to share your source files?
Best wishes
Pete
@Peter Jones Just “View Source” on the page. Everything’s uncompressed in the index.html for ease of demonstration. Feel free to steal as you see fit.