JSFiddle - React, Tailwind, and code Playground

by Gustavo Carvalho

HTML

<p>Incrementally draw Quad & Cubic Beziers with the slider</p>
<div id="wrapper">
    <input type="text" id="amount" />
    <div id="slider-vertical"></div>
    <canvas id="canvas" width=300 height=300></canvas>
</div>

CSS

body {
          background-color: ivory;
      }
      #wrapper {
          position:relative;
      }
      canvas {
          position:absolute;
          left:40px;
          top:5px;
          border:1px solid blue;
      }
      #amount {
          position:absolute;
          left:1px;
          top:5px;
          margin-bottom:15px;
          width:23px;
          border:0;
          color:#f6931f;
          font-weight:bold;
      }
      #slider-vertical {
          position:absolute;
          left:5px;
          top:40px;
          width:15px;
          height:225px;
          border:0px;
          color:#f6931f;
          font-weight:bold;
      }

JavaScript

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

      // starting value
      var startingSliderValue = 50;
      drawBoth(startingSliderValue);


      $("#slider-vertical").slider({
          orientation: "vertical",
          range: "min",
          min: 0,
          max: 100,
          value: startingSliderValue,
          slide: function (event, ui) {
              $("#amount").val(ui.value);
              drawBoth($("#amount").val());
          }
      });
      $("#amount").val($("#slider-vertical").slider("value"));


      function drawBoth(sliderValue) {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          drawQuadBezier(sliderValue / 100);
          drawCubicBezier(sliderValue / 100);
      }


      function drawQuadBezier(pct) {
          var startPt = {
              x: 18.8,
              y: 45
          };
          var controlPt = {
              x: 28,
              y: 160
          };
          var endPt = {
              x: 228,
              y: 165
          };

          ctx.beginPath();
          ctx.moveTo(startPt.x, startPt.y);
          for (var p = 0; p <= pct; p += .01) {
              var pt = getQuadraticBezierXY(p, startPt, controlPt, endPt)
              ctx.lineTo(pt.x, pt.y);
          }
          ctx.strokeStyle = "green";
          ctx.stroke();
          var pt = getQuadraticBezierXY(pct, startPt, controlPt, endPt)
          drawDot(pt.x, pt.y, "#0077c1");
      }

      function drawCubicBezier(pct) {
          var startPt = {
              x: 20,
              y: 75
          };
          var controlPt1 = {
              x: 55.2,
              y: 150
          };
          var controlPt2 = {
              x: 200,
              y: 100
          };
          var endPt = {
              x: 228,
              y: 165
          };

          ctx.beginPath();
          ctx.moveTo(startPt.x, startPt.y);
          for (var p = 0; p <= pct; p += .01) {
              var pt =...