JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

JavaScript

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


	let canv = document.querySelector('canvas');
	canv.width = 700;
	canv.height = 500;
	let ctx = canv.getContext('2d');
	ctx.fillStyle = 'lime';
	ctx.strokeStyle = 'red';
	ctx.strokeRect(590, 390, 100, 80);
	ctx.fillRect(600, 400, 80, 60);
	ctx.fillStyle = 'orange';
	ctx.lineWidth = 3;
	/*ctx.beginPath();
	ctx.ellipse(350, 250, 150, 60, 0, 0, Math.PI * 2);
	ctx.closePath();
	ctx.fill();
	ctx.stroke();
	ctx.clearRect(350, 250, 151, 61);
	ctx.beginPath();
	ctx.ellipse(450, 350, 150, 60, 0, 0, Math.PI * 2);
	ctx.closePath();
	ctx.fillStyle = 'aqua';
	ctx.fill();
	ctx.stroke();*/
	ctx.font = 'normal 30px Impact';
	ctx.fillText('Привіт, світ!', 10, 36);
	//ctx.font = 'italic 300px Courier New';
	//ctx.strokeText('JS', 100, 300);
	// image
	/*var img = new Image();
	img.onload = function(){
		ctx.drawImage(this, 10, 60);
		ctx.drawImage(this, 170, 60, 220, 60);
		strokeCat(ctx);
	};
	img.src = 'http://www.flashbynight.com/tutes/lightbox/cat.jpg';*/

	/*ctx.beginPath();
	ctx.moveTo(150, 100);
	ctx.lineTo(300, 100);
	ctx.lineTo(380, 150);
	ctx.lineTo(500, 150);
	ctx.lineTo(500, 200);
	ctx.lineTo(440, 200);
	ctx.arc(400, 200, 40, toRad(0), toRad(180), 1);
	ctx.arc(200, 200, 40, toRad(0), toRad(180), 1);
	ctx.lineTo(100, 200);
	ctx.bezierCurveTo(70, 130, 160, 150, 150, 100);
	ctx.moveTo(436, 200);
	ctx.arc(400, 200, 36, toRad(0), toRad(360));
	ctx.moveTo(236, 200);
	ctx.arc(200, 200, 36, toRad(0), toRad(360));
	ctx.closePath();
	ctx.stroke();*/

	function drawElement(){
		ctx.beginPath();
		//ctx.rect(0, 0, 100, 70);
		ctx.rect(-50, -35, 100, 70);
		//ctx.rect(-50, -70, 100, 70);
		ctx.closePath();
		ctx.stroke();
		ctx.fill();
	}

	//drawElement();

	function aaa(x, y, a) {
		ctx.translate(x, y);
		ctx.rotate(toRad(a));
		drawElement();
		ctx.rotate(toRad(-a));
		ctx.translate(-x, -y);
	}

	aaa(100, 100, 0);
	aaa(130, 105, 10);
	aaa(160, 110, 20);
	aaa(190, 115, 30);
	aaa(220, 121, 40);
	aaa(250, 128, 50);
	aaa(280,...