JSFiddle - React, Tailwind, and code Playground

by simonsarris

HTML

<canvas id="canvas1" width="400" height="200"></canvas>
<p>
    You should see a red square and a blue rectangle, with two white "holes" created from the clipping region + clearRect.
</p>
<p>
    This works on all browsers except IE10 (it works on IE9)
</p>

CSS

canvas {
    border: 1px solid gray;
}

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');


ctx.fillStyle = 'red';
ctx.fillRect(50,50,80,80);
ctx.fillStyle = 'blue';
ctx.fillRect(30,70,90,20);

ctx.beginPath();
ctx.rect(60, 60, 20, 20);
ctx.rect(90, 80, 20, 20);
ctx.clip();

ctx.clearRect(0,0,500,500);