JSFiddle - React, Tailwind, and code Playground

by veeramarni

HTML

<div id="whiteboard" />

JavaScript

//Draw Rectangle
    
var whiteboard = $('#whiteboard');
var paper = Raphael('whiteboard' ,1000,1000);
paper.canvas.id = 1;
paper.circle(10,10,10);
var page1 = $('#1');
var cir;
var strtX=0;
var strtY=0;
var rad=0;
console.dir(page1);

whiteboard.bind('mousedown',mousedownHandler);

 function mousedownHandler(event){
     strtX = event.pageX;
     strtY = event.pageY;
    cir=  paper.ellipse(0,0,0,0);
 //   alert(event.pageX + " , " + event.pageY);
    whiteboard.bind('mousemove',mousemoveHandler);
    
};
function mouseupHandler(event){
    
    whiteboard.unbind('mousemove');
  
};

 function mousemoveHandler(event){
     
     var endX = event.pageX;
     var endY = event.pageY;
     var rad1 = endX - strtX;
     var rad2 = endY - strtY;
    var coX = (endX + strtX)/2;
     var coY = (endY + strtY)/2;
       console.log(Math.abs(rad1)+ " ," + Math.abs(rad2));
  //   paper.circle(coX,coY,0).attr("r",rad/2);
     cir.attr({"rx":Math.abs(rad1/2),"ry":Math.abs(rad2/2),"cx":coX,"cy":coY});
      console.log();
    whiteboard.bind('mouseup',mouseupHandler);
    };