JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<p>Filled Bezier curve with uniform width</p>
<canvas id="canvas1" width=400 height=175></canvas><br/>
<p>Filled Bezier curve with variable width</p>
<canvas id="canvas2" width=400 height=175></canvas>

CSS

body {
            background-color: ivory;
            padding:10px;
        }
        canvas {
            border:1px solid red;
        }

JavaScript

var canvas1=document.getElementById("canvas1");
        var ctx1=canvas1.getContext("2d");
        var canvas2=document.getElementById("canvas2");
        var ctx2=canvas2.getContext("2d");

        drawUniformRibbon(50,50,100,35,175,175,350,100,8);
        drawVariableRibbon(50,50,75,25,175,175,350,100,8,18);

        function drawUniformRibbon(x1,y1,cx1,cy1,cx2,cy2,x2,y2,width){
          ctx1.fillStyle = "red";  
          ctx1.beginPath();  
          ctx1.moveTo(x1, y1-width);  
          ctx1.bezierCurveTo(cx1, cy1, cx2, cy2, x2, y2+width);
          ctx1.lineTo(x2, y2+width*2);  
          ctx1.bezierCurveTo(cx2, cy2+width, cx1, cy1+width, x1, y1);
          ctx1.lineTo(x1, y1);
          ctx1.closePath();  
          ctx1.fill();
          ctx1.stroke(); 
        }

        function drawVariableRibbon(x1,y1,cx1,cy1,cx2,cy2,x2,y2,startWidth,endWidth){
          ctx2.fillStyle = "yellow";  
          ctx2.beginPath();  
          ctx2.moveTo(x1, y1-startWidth);  
          ctx2.bezierCurveTo(cx1, cy1, cx2, cy2, x2, y2);
          ctx2.lineTo(x2, y2+endWidth);  
          ctx2.bezierCurveTo(cx2, cy2, cx1, cy1, x1, y1+startWidth);
          ctx2.lineTo(x1, y1);
          ctx2.closePath();  
          ctx2.fill();
          ctx2.stroke(); 
        }