Property:
globalCompositeOperation:
source-over
source-atop
source-in
source-out
destination-over
destination-atop
destination-in
destination-out
lighter
copy
xor
Canvas:
your browser does not support the canvas tag
Code:
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='blue';
ctx.fillRect(10,10,50,50);
ctx.globalCompositeOperation=
'source-atop'
;
ctx.beginPath();
ctx.fillStyle='red';
ctx.arc(50,50,30,0,2*Math.PI);
ctx.fill();
Click the property values above to see the result
W3Schools.com
- Play it