JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<body>
<canvas width="300" height="100" id="c"></canvas>
</body>
</html>

JavaScript

window.onload = function () {
	var ctx = document.getElementById('c').getContext('2d');
	ctx.beginPath();

	var p1 = new Path();
	p1.rect(0,0,100,100);
	ctx.fillStyle = 'yellow';
	ctx.currentPath = p1;
	ctx.fill();
	ctx.translate(100,0);
	ctx.beginPath();

	var p2 = new Path("M0,0L100,0L100,100L0,100z");
	ctx.currentPath = p2;
	ctx.fillStyle = 'blue';
	ctx.fill();

	ctx.translate(200,0);
	ctx.beginPath();
	var p3 = new Path(p1);
	ctx.currentPath = p3;
	ctx.fillStyle = 'green';
	ctx.fill();
	ctx.translate(-200,0);
}