JSFiddle - React, Tailwind, and code Playground

by Daniel Cavalli

HTML

<canvas id="canvas" width="800" height="600" style = "border:1px solid #000000;">
	</canvas>

JavaScript

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

function dR(x,y,w,h,c,id)
	{
		context.fillStyle = c;
		context.fillRect(x,y,w,h)
	}
function dRs(x,y,w,h,l,s)
	{
		context.beginPath();
		context.lineWidth= l;
		context.strokeStyle= s;
		context.rect(x,y,w,h); 
		context.stroke();
	}
function mouseMove(e)
	{
		if(e.offsetX) {
			mouse_x = e.offsetX;
			mouse_y = e.offsetY;
		}
		else if(e.layerX) {
			mouse_x = e.layerX;
			mouse_y = e.layerY;
		}
	}
	var _mouseUp = function(e)
	{
		mouse_pressed = false;
	}
	var _mouseDown = function(e)
	{
		mouse_pressed = true;
	}
	canvas.addEventListener("mousemove", mouseMove);
	canvas.addEventListener("mouseup",_mouseUp);
	canvas.addEventListener("mousedown",_mouseDown);

// Mouse
var mouse_x = 0;
var mouse_y = 0;
var mouse_pressed = false;

//Grid
	var linha = 60
	var coluna = 20
	var grid_x = [];
	var grid_y = [];
	var grid_h = 40;
	var grid_w = 40;
	var grid_type = [];
    var bx = 0
    var by = 0
    var bs = 40

function grid()
	{
		for(var i = 0;i < linha;i++)
		{
			grid_type[i] = [(coluna)];
			for (var n = 0;n < coluna;n++)
			{
				grid_x[i] = i * 40 -40;
				grid_y[n] = n * 40;
				//dI(arv1,grid_x[i],grid_y[n],grid_w,grid_h)
				//dR(grid_x[i],grid_y[n],grid_w,grid_h,"#d1faaf")
				dRs(grid_x[i],grid_y[n],grid_w,grid_h,1,"#747474")
				grid_type[i][n] = false;
			}
		}
	}
	grid();
function draw()
	{
		dR(bx,by,bs,bs,"blue")
        for(var i = 0;i < linha;i++)
		{
			grid_type[i] = [(coluna)];
			for (var n = 0;n < coluna;n++)
			{
                if(mouse_x >= bx && mouse_x <= bx+bs && mouse_y >= by && mouse_y <= by+bs && mouse_pressed)
				{
					grid_x[i] = float;
                    float: right
				}
                if(mouse_x >= grid_x[i] && mouse_x <= grid_x[i] + 40 && mouse_y >= grid_y[n] && mouse_y <= grid_y[n] + 40 && mouse_pressed && !grid_type[i][n])
            {
                dR(grid_x[i],grid_y[n],grid_w,grid_w,"black") 
                grid_type[i][n] =...