html5 единиц холста

Question

Я играл с холстом html5 и не понимаю, как работают юниты. Я видел на MDN, что один «блок» на холсте должен быть 1 пиксель. Поэтому я нарисовал холст шириной 800px и высотой 400px. Затем я нарисовал прямоугольник с координатами 400, 200, который, как я думал, поместил верхний левый угол мертвой точки. Тем не менее, он получил далеко от экрана. Когда я уменьшил его примерно до 200, 100 или около того, я мог видеть прямоугольник, но он не имел никакого логического смысла, где он оказался.

Короче говоря. Как работает система координат в канве?

Answer 1

Это должно быть правильно. Вот пример:

http://jsfiddle.net/hvyvY/

Обратите внимание, что вы должны использовать атрибуты ширины и высоты HTMLCanvasElement, чтобы установить его размер, например:

<canvas id="canvas1" width="800" height="400">

НЕ стиль CSS этого элемента. Изменение стиля CSS Canvas вместо этого будет масштабировать его.