Apply canvas composite to only two operations

Question

I need to draw a pizza with opacity so that it looks “empty” and gradually fill the pizza with a full-color image clockwise using a canvas.

I started to draw an “empty” pizza using the same image with globalAlpha below 1.

Then I drew a “full” pizza right above it.

Finally, I gradually draw the arc like a pizza mask and impose on it the composite operation, "destination-atop" . This effectively disguises the pizza as I want it, but with an adverse effect, it also disguises the first pizza, "empty." I just want him to hide the second pizza I'm drawing.

So, in principle, I need to make a composition between two operations, and not between everything that was done earlier and everything that was drawn after. Here is my code:

 var ratio = 0; var image = new Image(); image.src = "http://www.pizza.la-recette.net/img/pizza-001.jpg"; image.onload = function() { var canvas = document.querySelector("canvas"); var ctx = canvas.getContext("2d"); setInterval(function() { ratio += 0.01; ratio = ratio % 1; ctx.clearRect(0, 0, canvas.width, canvas.height); //Draw "empty" pizza image ctx.globalAlpha = 0.6; ctx.drawImage(image, 0, 0); //Draw actual pizza image ctx.globalAlpha = 1; ctx.drawImage(image, 0, 0); //Draw mask ctx.globalCompositeOperation = "destination-atop"; ctx.beginPath(); ctx.moveTo(image.width / 2, image.height / 2); ctx.arc(image.width / 2, image.height / 2, image.width / 2, -Math.PI / 2, (-Math.PI / 2) + ((Math.PI * 2) * ratio), false); ctx.fill(); }, 100); };​ 

jsFiddle

How can i do this?

Answer 1

Instead of drawing a mask, you can create a clipping area before you draw the actual image of the pizza. The code is almost the same, you basically replace the ctx.fill() call with ctx.clip() and move the second drawImage down. You also need to save / restore state of the context until the clip area is reset each time.

 var ratio = 0; var image = new Image(); image.src = "http://www.pizza.la-recette.net/img/pizza-001.jpg"; image.onload = function() { var canvas = document.querySelector("canvas"); var ctx = canvas.getContext("2d"); setInterval(function() { ratio += 0.01; ratio = ratio % 1; ctx.clearRect(0, 0, canvas.width, canvas.height); //Draw "empty" pizza image ctx.globalAlpha = 0.6; ctx.drawImage(image, 0, 0); ctx.save(); //Set the clipping region ctx.beginPath(); ctx.moveTo(image.width / 2, image.height / 2); ctx.arc(image.width / 2, image.height / 2, image.width / 2, -Math.PI / 2, (-Math.PI / 2) + ((Math.PI * 2) * ratio), false); ctx.clip(); //Draw actual pizza image ctx.globalAlpha = 1; ctx.drawImage(image, 0, 0); ctx.restore(); }, 100); };