JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<br/><p>The "bullseye" red dots are on x1/y1 and x2/y2 to confirm results</p><br/>
<canvas id="canvas" width=307 height=407></canvas>

CSS

body{ background-color: ivory; }
        canvas{border:1px solid blue;}

JavaScript

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

            DrawDottedLine(300,400,7,7,7,20,"green");

            function DrawDottedLine(x1,y1,x2,y2,dotRadius,dotCount,dotColor){
              var dx=x2-x1;
              var dy=y2-y1;
              var spaceX=dx/(dotCount-1);
              var spaceY=dy/(dotCount-1);
              var newX=x1;
              var newY=y1;
              for (var i=0;i<dotCount;i++){
                      drawDot(newX,newY,dotRadius,dotColor);
                      newX+=spaceX;
                      newY+=spaceY;              
               }
               drawDot(x1,y1,3,"red");
               drawDot(x2,y2,3,"red");
            }
            function drawDot(x,y,dotRadius,dotColor){
                ctx.beginPath();
                ctx.arc(x,y, dotRadius, 0, 2 * Math.PI, false);
                ctx.fillStyle = dotColor;
                ctx.fill();              
            }