clip-multiple-paths.html (439B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <canvas id="canvas" width="100" height="100"></canvas> 5 6 <script> 7 8 var canvas = document.getElementById('canvas'); 9 var ctx = canvas.getContext('2d'); 10 11 ctx.fillStyle = '#0f0'; 12 ctx.fillRect(0, 0, 100, 100); 13 14 ctx.beginPath(); 15 ctx.rect(30, 30, 40, 40); 16 ctx.clip(); 17 18 ctx.beginPath(); 19 ctx.arc(50, 50, 25, 0, 2 * Math.PI); 20 ctx.clip(); 21 22 ctx.fillStyle = '#f00'; 23 24 ctx.fillRect(0, 0, 100, 100); 25 26 </script> 27 </body></html>