JSFiddle - React, Tailwind, and code Playground

by Noreh AD

JavaScript

// prep. scroll down
if (!CanvasRenderingContext2D.prototype.resetTransform) {
	CanvasRenderingContext2D.prototype.resetTransform = function() {
		this.setTransform(1, 0, 0, 1, 0, 0);
	}
}

CanvasRenderingContext2D.prototype.background = function(bgColor) {
	this.resetTransform();
	context.beginPath();
	context.rect(0,0, this.canvas.width, this.canvas.height);
	context.fillStyle = bgColor;
	context.fill();
}

CanvasRenderingContext2D.prototype.grid = function(tileSize, gridColor) {
	this.resetTransform();
	
	var horizontalLineCount	= Math.floor(this.canvas.height / tileSize);
	var verticalLineCount	= Math.floor(this.canvas.width / tileSize);
	var currentX = 0,
		currentY = 0;
	
	for (var i = 0; i < horizontalLineCount; i++) {
		currentY += tileSize;
		this.beginPath();
		this.moveTo(0, currentY + 0.5);
		this.lineTo(this.canvas.width, currentY + 0.5);
		this.strokeStyle = gridColor;
		this.stroke();
	}
	
	for (var i = 0; i < verticalLineCount; i++) {
		currentX += tileSize;
		this.beginPath();
		this.moveTo(currentX + 0.5, 0);
		this.lineTo(currentX + 0.5, this.canvas.height);
		this.strokeStyle = gridColor;
		this.stroke();
	}
}

function deg(deg) {
	return deg * Math.PI/180;
}

function saveToImage(obj) {
	var cvs = document.createElement("canvas");
	var ctx = cvs.getContext("2d");
	
	cvs.width = obj.boundingBox;
	cvs.height = obj.boundingBox;
	
	// outer shadow
	ctx.shadowColor	= "rgba(0,0,0,.25)";
	ctx.shadowBlur	= 3;
	
	ctx.translate(obj.boundingBox/2, obj.boundingBox/2);
	
	// draw obj
	ctx.beginPath();
	ctx.arc(0, 0, obj.radius, deg(0), deg(360));
	ctx.fillStyle = obj.fill;
	ctx.fill();
	
	// draw checker
	// bottom right pie
	ctx.beginPath();
	ctx.arc(0, 0, obj.radius, deg(0), deg(90));
	ctx.lineTo(0,0);
	ctx.fillStyle = "rgba(0,0,0,.04)";
	ctx.fill();
	// top left pie
	ctx.beginPath();
	ctx.arc(0, 0, obj.radius, deg(180), deg(270));
	ctx.lineTo(0,0);
	ctx.fillStyle = "rgba(0,0,0,.025)";
	ctx.fill();
	
	var img = new Image();
	img.src =...