Прямоугольник на холсте HTML5 растянут

Я работаю над веб-сайтом, и я пытаюсь получить прямоугольники на холсте HTML5 с помощью javascript. Обычно это не проблема, но теперь, когда я делаю прямоугольник с шириной и высотой 10. Кажется, что он создает прямоугольник шириной 10 и высотой 20.

Я делаю Rectangle следующим образом:

var canvas = $("#canvas");
var context = canvas.get(0).getContext("2d");

context.fillRect(0, 0, 10, 10);

Холст div задан с шириной 100%, но я попытался дать ему фиксированную ширину, и это тоже не помогло.

Ответ 1

Вам нужно установить ширину и высоту элемента canvas, иначе это может быть результатом некоторых браузеров.

<canvas id="canvas" width="400" height="300" />

И вы не можете установить размер холста с помощью CSS, это растянет холст.

Ответ 2

Размер по умолчанию для холста 300 x 150.

Вероятно, вы используете эти значения по умолчанию, чтобы прямоугольник выглядел не квадратным....