How to draw this arrow?

Question

There are two arrays, of which numbers are chosen at random. There is a ruler. The arrow from 0 to first syllable should appear. For example, if the first syllable is 7, then the arrow should be from 0 to 7. How to draw such an arrow? Attached the picture.

Ruler without line:

Ruler with line:

var x  = [5, 6, 7, 8];
var y = [1, 2, 3, 4];

var randX = Math.floor(Math.random() * x.length);
var randY = Math.floor(Math.random() * y.length);

const parent = document.querySelector('#parent');

parent.innerHTML = '<b>' + x[randX] + '</b>' + '+' + '<b>' + y[randY] + '</b>' ;

<div id="parent"><b>ABCDE</b></div>

Possible duplicate of [Drawing lines on html page](https://stackoverflow.com/questions/4270485/drawing-lines-on-html-page) — takendarkk, Dec 21 '17 at 17:34
StackOverflow is not a code writing service. Please come back when you've got a ` — Alnitak, Dec 21 '17 at 17:35
Use [canvas](https://www.w3schools.com/html/html5_canvas.asp). — Alexander, Dec 21 '17 at 17:36

Narendra Kumar · Answer 1 · 2017-12-23T14:10:34.113

You may use the below code to draw an arc for the arrow with your business logic to generate the desired ruler.

<!DOCTYPE html>
 <html>
  <body>
   <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
   </canvas>
   <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(10, 70);
    ctx.bezierCurveTo(10, -20, 200, -20, 200, 70);
    ctx.lineJoin = "round";
    ctx.moveTo(210, 30);
    ctx.lineTo(200, 70);
    ctx.lineTo(180, 40);
    ctx.stroke();
   </script> 
  </body>
 </html>

score 1 · Answer 2 · answered Dec 22 '17 at 08:31

This code is giving the exact result you wanted.

JS Fiddle Link - https://jsfiddle.net/deepak104080/odj5yy0h/14/

var range = 16; /*You can take any value for ruler */

for (i = 0; i < range; i++) { 
 var div = document.createElement("div");
 div.innerHTML = i;
 div.className += "number"
 document.getElementById("numberLeftEnd").appendChild(div);

 var div2 = document.createElement("div2");
 div2.className += "line"
 document.getElementById("lineContainer").appendChild(div2);
}

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 70);
ctx.bezierCurveTo(10, -20, 200, -20, 200, 70);
ctx.lineJoin = "round";
ctx.moveTo(210, 50);
ctx.lineTo(200, 70);
ctx.lineTo(180, 55);
ctx.stroke();

#myCanvas {
  position:absolute;
  float:left;
}
.lineContainer {
    position:absolute;
    float:left;
    width: 90%;
    margin-top:70px;
}
.line {
    border-top: 1px solid blue;
    border-right: 1px solid blue;
    width: 20px;
    Height: 10px;
    float: left;
    margin: 0;
    padding: 0;
}
.numberContainer {
    position: absolute;
    top: 10px;
    margin: 0;
    padding: 0;
}
.number {
    width: 21px;
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;
}
  
.numberLeftEnd {
    width: 11px;
    Height: 5px;
    float: left;
    margin: 0;
    padding: 0;
}

<body>
<canvas id="myCanvas">
Your browser does not support the HTML5 canvas tag.
</canvas>
              
<div id="lineContainer" class="lineContainer">
  <div id="numberLeftEnd" class="numberContainer">
  <div class="numberLeftEnd"></div>
  </div>
</div>
      
</body>

How to draw this arrow?

2 Answers2