JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

canvas { margin:2em auto; display:block; border:1px solid #666; }

JavaScript

if (window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype.lineTo){
            CanvasRenderingContext2D.prototype.dashedLine = function(x,y,x2,y2,dashArray, start){
                if (!dashArray) dashArray=[10,5];
                var dashCount = dashArray.length;
                var dashSize = 0;
                for (i = 0; i < dashCount; i++) dashSize +=parseInt(dashArray[i]);
                var dx = (x2-x), dy = (y2-y);
                var slope = dy/dx;
                var dashOffSet = dashSize * (1 - (start/100))
                var xOffsetStep = Math.sqrt(dashOffSet*dashOffSet / (1 + slope*slope) );
                x -= xOffsetStep;
                dx += xOffsetStep; 
                y -= slope*xOffsetStep;
                dy += slope*xOffsetStep;
                this.moveTo(x, y);
                var distRemaining = Math.sqrt( dx*dx + dy*dy);
                var dashIndex=0, draw=true;
                while (distRemaining>=0.1 && dashIndex<10000){
                    var dashLength = dashArray[dashIndex++%dashCount];
                    if (dashLength > distRemaining) dashLength = distRemaining;
                    var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );
                    x += xStep
                    y += slope*xStep;
                    if (dashOffSet > 0) {
                        dashOffSet -= dashLength;
                        this.moveTo(x,y);
                    } else {
                        this[draw ? 'lineTo' : 'moveTo'](x,y);
                    }
                    distRemaining -= dashLength;
                    draw = !draw;
                }
                // Ensure that the last segment is closed for proper stroking
                this.moveTo(0,0);
            }
        }

var dashes = '10 20 2 20'

            var c = document.getElementsByTagName('canvas')[0];
            c.width = 300; c.height = 400;
            var ctx = c.getContext('2d');
            ctx.strokeStyle = 'black';
 
...