JSFiddle - React, Tailwind, and code Playground

by Mert Ener

HTML

<canvas id = "canvas_data" height = "2000" width = "2000" style = "background-color:lightgrey;"></canvas>

JavaScript

const canvas_var = document.querySelector('#canvas_data');  

const ctx= canvas_var.getContext('2d'); ctx.scale(0.25, 0.25);
ctx.translate(2000, 2000);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 0);
ctx.stroke();
// setup end
ctx.translate(100, 0);
ctx.rotate(-0.5*Math.PI);
ctx.lineTo(100, 0);
ctx.stroke();

ctx.translate(100, 0);
ctx.rotate(-0.5*Math.PI);
ctx.lineTo(100, 0);
ctx.lineTo(100, 100);
ctx.stroke();

ctx.translate(100, 100);
ctx.rotate(-0.5*Math.PI);

ctx.lineTo(0, 100);
ctx.lineTo(100, 100);
ctx.lineTo(100, 200);
ctx.lineTo(0, 200);
ctx.stroke();

ctx.translate(0, 200);
ctx.rotate(-0.5*Math.PI);
ctx.lineTo(-100, 0);
ctx.lineTo(-100, 100);
ctx.lineTo(0, 100);
ctx.lineTo(0, 200);
ctx.lineTo(-100, 200);
ctx.lineTo(-100, 300);
ctx.lineTo(-200, 300);
ctx.lineTo(-200, 200);
ctx.stroke();

ctx.translate(-200, 200);
ctx.rotate(-0.5*Math.PI);
ctx.lineTo(0, -100);
ctx.lineTo(-100, -100);
ctx.lineTo(-100, 0);
ctx.lineTo(-200, 0);
ctx.lineTo(-200, 100);
ctx.lineTo(-100, 100);
ctx.lineTo(-100, 200);
ctx.lineTo(-200, 200);
ctx.lineTo(-200, 100);
ctx.lineTo(-300, 100);
ctx.lineTo(-300, 200);
ctx.lineTo(-400, 200);
ctx.lineTo(-400, 100);
ctx.lineTo(-500, 100);
ctx.lineTo(-500, 0);
ctx.lineTo(-400, 0);
ctx.stroke();

ctx.translate(-400, 0);
ctx.rotate(-0.5*Math.PI);
ctx.lineTo(-400, -500);
ctx.lineTo(-400, -400);
ctx.stroke();

ctx.translate(-400, -400);
ctx.rotate(-0.5*Math.PI);
ctx.lineTo(100, -800);
ctx.lineTo(0, -800);
ctx.stroke();

ctx.translate(0, -800);
ctx.rotate(-0.5*Math.PI);
ctx.lineTo(800, -700);
ctx.lineTo(800, -800);
ctx.stroke();

ctx.translate(800, -800);
ctx.rotate(-0.5*Math.PI);
ctx.lineTo(1600, 0);
ctx.stroke();