CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
Mike Rifgin
Mike Rifgin

Reputation: 10761

Canvas elements cut off at the

When I place a square on the canvas at 0,0 coords the top left is cut off:

var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
context.strokeStyle = 'blue';
context.rect(0, 0, 200, 100);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
<canvas id="c" width="500" height="500"></canvas>

Why is this?

Upvotes: 1

Views: 2581

Answers (1)

markE
markE

Reputation: 105035

It's because half the stroke is inside the rect.fill and the other half of the stroke is outside the rect.fill.

Kind of like css borders, you must account for them when sizing/positioning.

In canvas's case, the stroke is always half-in / half-out the object.

Upvotes: 2

Related Questions