JSFiddle - React, Tailwind, and code Playground

by bhupendra negi

HTML

<canvas width= "500" height = "300" id = "slate">
    No support for canvas on your browser  !!
</canvas> 
<input type = "button" onclick="erase()" value = "Erase"/>

CSS

canvas {
    
border : 1px solid #ddd
}

JavaScript

$(document).ready({

var canvas = document.getElementById("slate");
var ctx = canvas.getContext("2d");
//var isDraw
canvas.addEventListener("mousedown",to,false);
canvas.addEventListener("mousemove",move,false);
canvas.addEventListener("mouseup",up,false);

function erase() {
    alert("df");
    
}


function to(e)
{
    isDraw = true;
    ctx.moveTo(e.clientX,e.clientY);
  
}

function move(e)
{
 if(isDraw)
 ctx.lineTo(e.clientX,e.clientY);
 ctx.stroke();
 
}

function up()
{
 isDraw = false;   
}
});