HTML5 canvas provides compositing attribute globalCompositeOperation that affect all the drawing operations.
Example
We can draw new shapes behind existing shapes and mask off certain areas, clear sections from the canvas using globalCompositeOperation attribute as shown below in the example.
<!DOCTYPE HTML> <html> <head> <script> var compositeTypes = [ 'source-over','source-in','source-out','source-atop', 'destination-over','destination-in','destination-out', 'destination-atop','lighter','darker','copy','xor' ]; function drawShape(){ for (i=0;i<compositeTypes.length;i++){ var label = document.createTextNode(compositeTypes[i]); document.getElementById('lab'+i).appendChild(label); var ctx = document.getElementById('tut'+i).getContext('2d'); // draw rectangle ctx.fillStyle = "#FF3366"; ctx.fillRect(15,15,70,70); // set composite property ctx.globalCompositeOperation = compositeTypes[i]; // draw circle ctx.fillStyle = "#0066FF"; ctx.beginPath(); ctx.arc(75,75,35,0,Math.PI*2,true); ctx.fill(); } } </script> </head> <body onload="drawShape();"> <table border="1" align="center"> <tr> <td><canvas id="tut0" width="125" height="125"></canvas><br/> <label id="lab0"></label> </td> <td><canvas id="tut1" width="125" height="125"></canvas><br/> <label id="lab1"></label> </td> <td><canvas id="tut2" width="125" height="125"></canvas><br/> <label id="lab2"></label> </td> </tr> <tr> <td><canvas id="tut3" width="125" height="125"></canvas><br/> <label id="lab3"></label> </td> <td><canvas id="tut4" width="125" height="125"></canvas><br/> <label id="lab4"></label> </td> <td><canvas id="tut5" width="125" height="125"></canvas><br/> <label id="lab5"></label> </td> </tr> <tr> <td><canvas id="tut6" width="125" height="125"></canvas><br/> <label id="lab6"></label> </td> <td><canvas id="tut7" width="125" height="125"></canvas><br/> <label id="lab7"></label> </td> <td><canvas id="tut8" width="125" height="125"></canvas><br/> <label id="lab8"></label> </td> </tr> <tr> <td><canvas id="tut9" width="125" height="125"></canvas><br/> <label id="lab9"></label> </td> <td><canvas id="tut10" width="125" height="125"></canvas><br/> <label id="lab10"></label> </td> <td><canvas id="tut11" width="125" height="125"></canvas><br/> <label id="lab11"></label> </td> </tr> </table> </body> </html>