JSFiddle - React, Tailwind, and code Playground

by Chris Wilson

HTML

<input id="start" value="start" type="button" />
<input id="stop" value="stop" type="button" />

<div id="canvas"></div>

<div id="notes"></div>

JavaScript

var paper = Raphael("canvas", 500, 800);

var image = paper.image("http://img.timeinc.net/time/wp/interactives/apps/ronaldo_body_parts/ronaldo.jpg", 0, 0, 410, 614);

var running = false,
    path = [],
    mypath,
    shape;

document.getElementById("start").onclick = function() {
    running = true;
    path = [];
}

document.getElementById("stop").onclick = function() {
    running = false;
    console.log(path);
    mypath = "M" + path.join("L") + "z";
    document.getElementById("notes").innerHTML = mypath;
    paper.path(mypath).attr({
        fill: "yellow",
        "fill-opacity": 0.3,
        stroke: "orange",
        "stroke-width": 2
        
    });
}

image.click(function(e) {
    console.log(e);
    if (running) {
        path.push([e.layerX, e.layerY]);
        console.log(path);
    }    
});