JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<a href="#" class="anchor pStart"></a>
 <a href="#" class="control p1"></a>

<a
href="#" class="control p2"></a> <a href="#" class="anchor pEnd"></a>
 <a href="#" class="control p3"></a>

    <a
    href="#" class="control p4"></a>
        <canvas height="400" width="400" id="canvas"></canvas>
        <br/>
        <p>Drag the White anchor handles to the corners of the eye</p>
        <p>Drag the Red and Blue control handles to fit the eye</p>
        <p>context.moveTo( <span id="start"></span>);</p>
        <p>context.bezierCurveTo( <span id="c1"></span>, <span id="c2"></span>,
            <span
            id="end1"></span>);</p>
        <p>context.bezierCurveTo( <span id="c3"></span>, <span id="c4"></span>,
            <span
            id="end2"></span>);</p>

CSS

body {
			    font-family: arial;
			}
			.anchor {
			    background: #fff;
			    position: absolute;
			    display: block;
			    height: 10px;
			    width: 10px;
			    border: 1px solid #333;
			    border-radius:5px;
			}
			.control {
			    background: #fff;
			    position: absolute;
			    display: block;
			    height: 20px;
			    width: 20px;
			    border: 1px solid #333;
			    border-radius:10px;
			}
			.p1, .p2 {
			    background: red;
			    z-index: 50;
			}
			.p3, .p4 {
			    background: blue;
			}
			.pStart {
			    background:white;
			}
			.pEnd {
			    background:white;
			}
			.pStart {
			    left: 54px;
			    top: 166px;
			}
			.pEnd {
			    left: 346px;
			    top: 189px;
			}
			.p1 {
			    left: 150px;
			    top: 39px;
			}
			.p2 {
			    left: 276px;
			    top: 97px;
			}
			.p3 {
			    left: 219px;
			    top: 227px;
			}
			.p4 {
			    left: 147px;
			    top: 224px;
			}
			canvas {
			    border: 1px solid #333;
			}
			#start, #end2 {
			    color:green;
			}
			#end1 {
			    color:purple;
			}
			#c1, #c3 {
			    color:red;
			}
			#c2, #c4 {
			    color:blue;
			}

JavaScript

var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        $pStart = $(".pStart");
        $pEnd = $(".pEnd");
        $p1 = $(".p1");
        $p2 = $(".p2");
        $p3 = $(".p3");
        $p4 = $(".p4");
        $codeMove = $("code-move");
        $codeBez1 = $("code-bez1");
        $codeBez2 = $("code-bez2");

        $(".pStart, .pEnd, .p1, .p2, .p3, .p4").draggable({
            containment: 'parent',
            drag: function (event, ui) {
                renderWrap(ctx);
            },
            stop: function () {
                renderWrap(ctx);
            }
        });

        var eyeImage = new Image();
        eyeImage.onload = function () {
            canvas.width = eyeImage.width * 1.5;
            canvas.height = eyeImage.height * 1.5;
            renderWrap(ctx);
        }
        eyeImage.src = "http://i.stack.imgur.com/SbcL4.png";

        function renderWrap(ctx) {
            var pStart = $pStart.position();
            var pEnd = $pEnd.position();
            var p1 = $p1.position();
            var p2 = $p2.position();
            var p3 = $p3.position();
            var p4 = $p4.position();
            render({
                x: pStart.left,
                y: pStart.top
            }, {
                x: pEnd.left,
                y: pEnd.top
            }, {
                x: p1.left,
                y: p1.top
            }, {
                x: p2.left,
                y: p2.top
            }, {
                x: p3.left,
                y: p3.top
            }, {
                x: p4.left,
                y: p4.top
            });
        };

        function render(start, end, p1, p2, p3, p4) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(eyeImage, 0, 0, eyeImage.width, eyeImage.height, 0, 0, eyeImage.width * 1.5, eyeImage.height * 1.5);
            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.strokeStyle = "orange";
     ...