HTML холст масштабируется по оси x? (использование Internet Explorer)

Я рисую на холсте объект с помощью JavaScript и каким-то образом Internet Explorer (не спрашивайте, я должен), Версия 11 масштабирует рисунки вдоль оси x.

Вот код JavaScript:

var c = document.getElementById('canvas1');
var ctx = c.getContext('2d');
ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI);
ctx.fillStyle = '#000000';
ctx.lineWidth = 5;
ctx.stroke();

Вы ожидаете, что появится круг. Но вместо этого я получаю эллипс:

(Не обращайте внимания на горизонтальную линию слева, которая просто окружает div. Холст представляет собой небольшой квадрат.)

EDIT: размер холста 100 x 100.

1 ответ

  1. После комментариев ответ заключается в том, чтобы установить высоту и ширину canvasобъекта в качестве атрибутов canvas-тега. Вроде этого:

    <canvas height="200" width="400"></canvas>
    

    Смотрите этот пост для дальнейшего объяснения.