JSFiddle - React, Tailwind, and code Playground

by samu_eyes

HTML

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

JavaScript

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

var img = new Image()
img.onload = function() {
  draw()
};
img.src = "http://placekitten.com/100/140";

draw();

function draw() {
// 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 we'll draw the image in between, if its loaded
ctx.drawImage(img, 100, 30);
  
// 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);
ctx.rect(20,20,40,40);
ctx.rect(80,20,40,40);
ctx.rect(20,80,40,40);
ctx.rect(80,80,40,40);
ctx.fill();
}