How to draw an arrowhead with proper coordinates in the canvas

Question

I have drawn the curved line using below lines of code, I need to draw an arrowhead.For this I need to draw 2 lines wth some angle and rotate it some some angle. It is very confusing to draw. I am following the post present in the link provided for arrowhead.

.html

<canvas id = "canvas" width = "100px" height = "120px"></canvas>

.ts

  arrow({ x: 10, y: 10 }, { x: 100, y: 140 }, 15); //function called on reload.

  function arrow(p1, p2, size) {
  var angle = Math.atan2((p2.y - p1.y), (p2.x - p1.x));

  //curve line
  ctx.strokeStyle = 'white';      
  ctx.beginPath();      
  ctx.lineWidth=3;     
  ctx.moveTo(40,0);     
  ctx.bezierCurveTo(30, 0, -70, 75, 100, 150);
  ctx.lineTo(100,120)         
  ctx.stroke();

 //to draw a triangle ??

}

Jay Shankar Gupta · Answer 1 · 2018-03-12T06:49:50.590

2

I tried look a like

arrow({ x: 10, y: 10 }, { x: 100, y: 140 }, 15); //function called on reload.

  function arrow(p1, p2, size) {
  var angle = Math.atan2((p2.y - p1.y), (p2.x - p1.x));
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
  //curve line
ctx.fillStyle = "";
ctx.fillRect(0,0,200,200);
  ctx.strokeStyle = 'white';      
  ctx.beginPath();      
  ctx.lineWidth=3;     
  ctx.moveTo(40,20);     
  ctx.bezierCurveTo(30,40, -0,110, 100, 149.5);
  ctx.moveTo(100,150.6);
  ctx.lineTo(82,133);
ctx.stroke();
  ctx.moveTo(100,149.7);
  ctx.lineTo(76,146);
ctx.stroke();
 //to draw a triangle ??
  }

<canvas id = "canvas" width = "150px" height = "300px"></canvas>

edited Mar 12 '18 at 06:49

answered Mar 12 '18 at 06:33

Jay Shankar Gupta

5,918
1
10
27

The curved lines are not same as in my screenshot.The canvas dimesnions also not matching. can you write the code only to draw the arrowhead and placing it to the position in my curved lines bottom? I think I can accept that answer then – Aditya Mar 12 '18 at 06:39
If you can see in the link provided the ans which aikon wrote uses the javascript functions – Aditya Mar 12 '18 at 06:40
The Last i can do is this only sorry – Jay Shankar Gupta Mar 12 '18 at 06:50

score 0 · Answer 2 · answered Jun 30 '22 at 23:37

You need some mathematics for this. This javascript method will draw a simple arrow head at the end of a line using canvas. It doesn't matter from which angle you come into the "arrow head".

//..come to the end of the line at some point
ctx.lineTo(tox, toy);

//draw the arrow head
ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 5), toy - headlen * Math.sin(angle + Math.PI / 5));
ctx.moveTo(tox, toy);
ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 5), toy - headlen * Math.sin(angle - Math.PI / 5));

How to draw an arrowhead with proper coordinates in the canvas

2 Answers2