JSFiddle - React, Tailwind, and code Playground

by Amarnath Shenoy

HTML

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

JavaScript

$('#myCanvas').bind("mousemove",function(e){

var c=document.getElementById("myCanvas");
  c.width=c.width;  
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
    var dx = Number(e.offsetX) - Number(prvX);
    var dy = Number(e.offsetY) - Number(prvy);
    if(Number(dx)>Number(dy))
    {  ctx.lineTo(e.offsetX,20);
     prvX =0;
prvy=e.offsetY;    
    }
     else
     {
      ctx.lineTo(20,e.offsetX); 
    
     }
     prvX =e.offsetX;
prvy=e.offsetY;    
    ctx.stroke();});