JSFiddle - React, Tailwind, and code Playground

by Daniel Cavalli

HTML

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

JavaScript

var canvas = document.getElementById("canvas");
	var context = canvas.getContext("2d");
	
	// Mouse
	var mouse_x = 0;
	var mouse_y = 0;
	var mouse_pressed = false;
    //Grid
	var linha = 20;
	var coluna = 20;
	var grid_x = [];
	var grid_y = [];
	var grid_h = 40;
	var grid_w = 40;
    var grid_type =[];
//Funções de Draw
function dR(x,y,w,h,c)
	{
		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();
	}
    //Evento do Mouse
    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);
    //Grid
    function grid()
	{
		for(var i = 0;i < linha;i++)
		{
			for (var n = 0;n < coluna;n++)
			{
				grid_x[i] = i * 40;
				grid_y[n] = n * 40;
				dRs(grid_x[i],grid_y[n],grid_w,grid_h,1,"#747474")
				grid_type[i] = false;
			}
		}
    }
    grid();
    function Estrada()
    {
        //Desenha Estrada
        for(var i = 0;i < 400;i++)
        {
            for (var n = 0;n < 400;n++)
            {
                if(mouse_x >= grid_x[i] && mouse_x <= grid_x[i] + grid_w && mouse_y >= grid_y[n] && mouse_y <= grid_y[n] + grid_h && mouse_pressed && !grid_type[i])
                {
                    dR(grid_x[i],grid_y[n],grid_w,grid_h,'#2e2e2e');
                    mouse_pressed = false;
                    grid_type[i] = true;
                }
            }
        }
    }
	function loop()
	{
		Estrada();
		setTimeout(loop,1000/60);
	}	
	loop();