Canvas arrow is not shown in Chrome

Question

I have drawn an arrow in canvas using the below code.

  window.onload = function() {
    var canvas   = document.getElementById("arrow");
    var context  = canvas.getContext("2d");

    context.beginPath();
    context.strokeStyle  = "red";
    context.fillStyle    = "red";

    context.moveTo(150, 400);
    context.lineTo(400, 400);
    context.lineTo(375, 375);
    context.arcTo(400, 400, 375, 425, 35);

    context.lineTo(400, 400);
    context.stroke();
    context.fill();
  });

But the arrow is not shown on the screen.

Did you set the `width` and `height` attributes of the canvas? — , Jun 07 '14 at 12:49

score 0 · Answer 1 · edited May 23 '17 at 10:32

In the HTML5 spec, the canvas element has a default coordinate size of 300×150px.

If you use CSS to resize the canvas to, say, 500×500px, then the canvas coordinates will be stretched so that (300, 150) is still the bottom right of the canvas: http://jsfiddle.net/Mh4uH/

You need to also apply a canvas width and height property:

<canvas id="arrow" width="500" height="500"></canvas>

Alternatively, you can use JavaScript to set the width and height to match the on-screen dimensions (http://jsfiddle.net/Mh4uH/1/):

canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

Canvas arrow is not shown in Chrome

1 Answers1