JSFiddle - React, Tailwind, and code Playground

by Jerome De Cuyper

HTML

<body id="home">

   <h1>Challenge #9 - Bezier curves</h1>

   <p>
      My take on the <a target="_blank" href="http://weblog.jamisbuck.org/2016/9/24/weekly-programming-challenge-9.html">ninth weekly challenge by Jamis Buck</a>.
   </p>
   <canvas id="scene" width="500" height="500"></canvas>

</body>

<script>
   // Inspired by http://rectangleworld.com/blog/archives/15
   window.addEventListener("load", bezierApp, false);

   function bezierApp() {

      point = function(x, y, rad) {
         if (!x) var x = 0;
         if (!y) var y = 0;
         if (!rad) var rad = 1;
         return {
            x: x,
            y: y,
            rad: rad
         };
      }

      var canvas = document.getElementById('scene');
      var cWidth = canvas.width;
      var cHeight = canvas.height;
      var context = canvas.getContext('2d');
      var dragging = false;

      // Control points
      var c1 = new point(100, 100, 10);
      var c2 = new point(250, 300, 10);
      var c3 = new point(400, 100, 10);

      init();

      function init() {
         drawScreen();
         canvas.addEventListener("mousedown", mouseDownListener, false);
      }

      var hitCtrlPoint = null;

      function mouseDownListener(evt) {
         var bRect = canvas.getBoundingClientRect();
         var mouseX = (evt.clientX - bRect.left) * (canvas.width / bRect.width);
         var mouseY = (evt.clientY - bRect.top) * (canvas.height / bRect.height);

         // Check if user clicked on any of the 3 control points
         if (hitTest(c1, mouseX, mouseY))
            hitCtrlPoint = c1;
         else if (hitTest(c2, mouseX, mouseY))
            hitCtrlPoint = c2;
         else if (hitTest(c3, mouseX, mouseY))
            hitCtrlPoint = c3;

         if (hitCtrlPoint) {
            dragging = true;
            dragHoldX = mouseX - hitCtrlPoint.x;
            dragHoldY = mouseY - hitCtrlPoint.y;
         }

         if (dragging)
            window.addEventListener("mousemove",...