JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

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

ctx.fillStyle = 'red';
ctx.fillRect(20,20,20,20);
ctx.fillStyle = 'blue';
ctx.fillRect(40,20,20,20);
ctx.fillStyle = 'yellow';
ctx.fillRect(40,40,20,20);
ctx.fillStyle = 'green';
ctx.fillRect(20,40,20,20);

// Do the same thing but additionally translate the blue "slice"

ctx.fillStyle = 'red';
ctx.fillRect(120,20,20,20);
ctx.fillStyle = 'blue';

ctx.save();
ctx.translate(10, -10);
ctx.fillRect(140,20,20,20); // note that we are drawing in the same place as before, the context is just translated
ctx.restore();


ctx.fillStyle = 'yellow';
ctx.fillRect(140,40,20,20);
ctx.fillStyle = 'green';
ctx.fillRect(120,40,20,20);