JSFiddle - React, Tailwind, and code Playground

by simonsarris

HTML

<canvas id="canvas1" width="500" height="500"></canvas>

JavaScript

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

// First lets draw a person (well a circle because we're lazy)
ctx.beginPath();
ctx.fillStyle = 'orange';
ctx.arc(130,130,80,0, Math.PI*2, true);
ctx.fill();



// Now draw the window over our cirlce
ctx.beginPath();
ctx.fillStyle = 'lightblue';
// First we draw a path counter-clockwise
ctx.moveTo(0,0);
ctx.lineTo(0,140);
ctx.lineTo(140,140);
ctx.lineTo(140,0);

// Then we call rect four times, which adds a rect to our path going clockwise
ctx.rect(20,20,40,40);
ctx.rect(80,20,40,40);
ctx.rect(20,80,40,40);
ctx.rect(80,80,40,40);

// Notice that this entire time we are making the window we never make a new path (just at the start),
// all of our commands have only added to the current path.
// This will mean that the 4 clockwise rects will be "cut out" of the counter-clockwise path.
// Making a window

ctx.fill();