HTML -холст не рендеринг эллипсов правильно ⇐ Html

[Anonymous]

Команда ellipse () < /code> в HTML Canvas не отображается должным образом, как можно увидеть в приведенном ниже фрагменте и скриншоте: < /p>

Я дал эллипс центр (117,5, 51), с Radiusx = 4 и radiusy = 3,5. Если вы нарисуете пиксельную сетку и нанесите ее там, экстенты эллипса (x min, x max, y min, y max) должны приземлиться на пиксели, но они слегка преодолевают (особенно на верхнем краю). < /Li>
Вы заметите в фрагменте, который я учитыл в пиксель пользовательского устройства. Моя установлена ​​на 1,25. Если у вас отличается от этого, я подозреваю, что вы не увидите кровотечение пикселя. src = "https://i.sstatic.net/19w9ahn3.png" /> < /p>
STACKOVERFLOW SNIPPETS в настоящее время не работают, я воссоздал проблему в CODEPEN. class = "Snippet-Code-Html Lang-Html PrettyPrint-Override">

Код: Выделить всё

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");

c.style.width = c.width/window.devicePixelRatio + "px";
c.style.height = c.height/window.devicePixelRatio + "px";

ctx.beginPath();
ctx.lineWidth = 1;
ctx.beginPath();
ctx.ellipse(117.5,51,4,3.5,0,0,2*Math.PI);
ctx.stroke();

Подробнее здесь: https://stackoverflow.com/questions/797 ... s-properly