JSFiddle - React, Tailwind, and code Playground

by veeramarni

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="whiteboard" />

JavaScript

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.circle(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;
  rad= parseInt(Math.sqrt((strtX - event.pageX) * (strtX - event.pageX)  + (strtY - event.pageY) * (strtY - event.pageY)));
   
    var coX = (endX + strtX)/2;
     var coY = (endY + strtY)/2;
       console.log(coX + " ," + coY);
  //   paper.circle(coX,coY,0).attr("r",rad/2);
     cir.attr({"r":rad/2,"cx":coX,"cy":coY});
      console.log();
    whiteboard.bind('mouseup',mouseupHandler);
    };