JSFiddle - React, Tailwind, and code Playground

by veeramarni

HTML

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<div id="canvas" width="500" height="500"></div>

CSS

#canvas  {
    height: 100%;
    width: 100%;
}

JavaScript

var canvas = $("#canvas");
paper = Raphael("canvas");
var clicking = false;
var line;
var pathArray = [];

 canvas.bind("mousedown", _mousedownHandler);
 canvas.bind("touchstart", _mousedownHandler);
function _mousedownHandler(event){
     clicking = true;
 // _drawArrowLineBegin(e);
       	if(event.type == "touchstart"){
			event.preventDefault(); 
			event = event.originalEvent.touches[0] || event.originalEvent.changedTouches[0];
		}
    _drawFreeLineBegin(event);
};

function _mousemoveHandler(event){
 // _drawArrowLineMove(event);
    	if(event.type == "touchmove"){
			event.preventDefault(); 
			event = event.originalEvent.touches[0] || event.originalEvent.changedTouches[0];
		}
    _drawFreeLineMove(event);
};
function _mouseupHandler(event){
    clicking = false;
};
function _enableEvents(){
           canvas.bind("mousemove.mmu", _mousemoveHandler);
        canvas.one("mouseup.mmu", _mouseupHandler);
        canvas.bind("touchmove.mmu", _mousemoveHandler);
        canvas.one("touchend.mmu", _mouseupHandler);
};
function _drawArrowLineBegin(e) {
    clicking = true;
        line = paper.path("M" + (e.offsetX || e.clientX) + " " + (e.offsetY || e.clientY) + "L" + (e.offsetX || e.clientX) + " " + (e.offsetY || e.clientY)).attr({stroke:'#FF0000', 'stroke-width': 2, 'arrow-end': 'classic-wide-long'});
    pathArray = line.attr("path");
 _enableEvents();
    }
function _drawArrowLineMove(e){
        if(clicking == false) return;
    if (pathArray[1][1] != undefined) { // not IE 8
        pathArray[1][1] = e.offsetX || e.clientX;
        pathArray[1][2] = e.offsetY || e.clientY;
    } else {
        pathArray = pathArray.replace(/L\d+ \d+$/, "L" + e.offsetX + " " + e.offsetY);
    }

    line.attr({path: pathArray});
}
function _drawFreeLineBegin(e) {
    clicking = true;
       line =  paper.path("M"
				+ (e.pageX) + ","
				+ (e.pageY)).attr({stroke:'#FF0000', 'stroke-width': 2});
     pathArray = line.attr("path");
_enableEvents();
    }
function...