JSFiddle - React, Tailwind, and code Playground

by techtiger255

HTML

<canvas></canvas>

JavaScript

const canvas = document.getElementsByTagName("canvas")[0];
var d = document,
	w = window,
	b = d.body,
canvas.width = w.innerWidth;
canvas.height = w.innerHeight;
b.append(canvas);

var c = canvas.getContext("2d");

alert(c.fillStyle);
//  = "#f85f85";

c.fillRect(50, 50, 50, 50);
c.fillRect(150, 50, 50, 50);
c.fillRect(100, 150, 50, 50);
c.ellipse(20,20,50,50,0,0,360);
//line

c.beginPath();

c.moveTo(50, 100);
c.lineTo(100, 200);

c.moveTo(150, 200);
c.lineTo(200, 100);

c.moveTo(100, 50);
c.lineTo(150, 50);

c.strokeStyle = "blue";

c.stroke();
c.closePath();

function draw2d(context, type, values, color = "previous") {
	if (color == "previous") {
		var strokeColor = context.strokeStyle,
			fillColor = context.fillStyle;
	}
	switch (type) {
		case "stroke":
			break;
	}

	function stroke(x, y, w, h) {}
}