JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<div class="content">
    <canvas id="can" width="400" height="250"></canvas>
</div>

CSS

html
{
    width:100%;
    height:100%;
    
}

body
{
    width:100%;
    height:100%;
    
}

.content
{
    width:100%;
    height:100%;
    background:#616161;
}

#can
{
    border:1px solid rgb(240,240,240); 
    margin:auto;
    position:relative;
    top:50px;
}

canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

JavaScript

var can = document.getElementById('can');


var ctx = can.getContext('2d');


ctx.fillStyle = '#ffffff';
ctx.fillRect(0,0,can.width,can.height);



ctx.strokeStyle = '#62b8e9';

var divsX = can.width/20;
var divsY = can.height/20;

ctx.lineWidth = 1;

ctx.beginPath();

for(t = 0; t < Math.ceil(divsX); t++)
{
    
    var x=t*20;
    ctx.moveTo(x+ .5, 0);
    ctx.lineTo(x+ .5, can.height);
    ctx.stroke();

}


for(t = 0; t < Math.ceil(divsY); t++)
{
    
    var y=t*20;
    ctx.moveTo(0, y+.5);
    ctx.lineTo(can.width , y + .5);
    ctx.stroke();
}


ctx.strokeStyle = "#000000";
ctx.fillStyle = "#000000";

var stu = $('#can');

console.log(stu);
var down = 0;


$("#can").on('mousedown',function(evy){
    
    down = 1;
    
	$("#can").on('mousemove',function(ev){
    	if(down)
        {
        		var absX = ev.pageX;
    var absY = ev.pageY;

    var relX = absX - stu.offset().left;
    var relY = absY - stu.offset().top;
    
    var q = Math.round(relX / 20) * 20;
    var b = Math.round(relY / 20) * 20;
    
    
    ctx.beginPath();
    ctx.arc(q,b,2,0,2 * Math.PI);
    ctx.fill();
        }
    
    });
    
    $('#can').on('mouseup',function(){
    	down = 0;
    });
    
});