Canvas элементы отрезанные на

Question

Когда я устанавливаю квадрат на холсте в 0,0 координатам верхний левый отрезан:

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>

Почему это?

Answer 1

Это потому, что половина хода находится внутри rect.fill и другая половина хода находится за пределами rect.fill.

Вид как css границы, вы должны учитывать их при калибровке/позиционировании.

В случае с холстом штрих всегда находится наполовину в/из-за объекта.