globalCompositeOperation copy fix – how to paint transparent on JS canvas

Below there is again a very special article. I think the people who are affected will understand what it is about. All others must be said that the next article will be for a wider audience again.

Some time ago I wrote an article about small progress bar script of mine, which is implemented entirely in JavaScript. Particular attention I had laid in part to the nice rounded corners. (See the following screenshot)

Originally, I had realized the transparent corners using own paths, which I created and filled as shown below.

ctx.globalCompositeOperation = "copy";
ctx.fillStyle = "rgba(0,0,0,0.0)";
ctx.fill();

Unfortunately I had to recognize that the script was not working correct any longer. But the JavaScript console of different browsers (IE, FF, Chrome) curiously gave me no errors or warnings.

After some googling I found out that the globalCompositeOperation “copy” is not correctly implemented/supported anymore. To find a solution therefore wasn’t easy, but I’ve found one.

Transparent surfaces can still be drawn without any problems. For this, only two changes are necessary. On the one hand, the value for globalCompositeOperation operational needs to be changed to “destination-out” and the fill-style must be completely visible. Concerning my progress bar script that looks like this:

ctx.globalCompositeOperation = "destination-out";
ctx.fillStyle = "rgba(0,0,0,1.0)";
ctx.fill();

It’s so easy to be. I hope I can hereby help one or the other…