Adding markers to CanvasRenderingContext2D in javascript

Question

I'm using d3.js and the CanvasRenderingContext2D object described here. I'm plotting a bunch of lines on the canvas using the following commands (inside a loop)

g.beginPath();
g.moveTo(nx, ny);
g.lineTo(nx+= dx*scale, ny += dy*scale);
g.stroke();

The issues I have is I want to add arrowheads (or other marker) to the end of these lines - and it's not clear to me how (or if) I can do this if the path is created using this approach. I see that it can be done if I create path directly, as shown in this example, but would prefer to use the Context2d methods above if possible. How does one add markers to the end of each path created using Context2D?

Helder Sepulveda · Answer 1 · 2018-09-09T20:11:38.013

Here is one way you can add a marker to the your lines.

I think a circle is the easiest way, that way we do not have to do any calculations to determine the angle.

var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
context.strokeStyle = "#000";
context.fillStyle = 'red';
context.lineWidth = 1;


function drawLine(data) {
  context.beginPath();
  context.moveTo(data[0].x, data[0].y);
  context.lineTo(data[1].x, data[1].y);
  context.stroke();
  context.beginPath();
  context.arc(data[1].x, data[1].y, 5, 0, Math.PI * 2);
  context.fill();
}

for (var i = 1; i < 5; i++) {
  drawLine([{ x: 0, y: 10 + i*10 }, { x: 200, y: 10 + i*30 }]);
}

<canvas id="canvas"></canvas>

Adding markers to CanvasRenderingContext2D in javascript

1 Answers1