Home/ Questions/Q 5934457
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T15:07:01+00:00

I’ve been playing around with the html5 canvas and don’t understand how the units

  • 0

I’ve been playing around with the html5 canvas and don’t understand how the units work. I saw on MDN that one “unit” on the canvas should be 1 pixel. So I drew a canvas 800px wide x 400px high. Then I drew a rectangle at the coordinate 400, 200 which I thought would put the top left corner dead center. However, it got put far off the screen. When I scaled it back to about 200, 100 or so I could see the rectangle but it didn’t logically make any sense where it ended up.

Long story short. How does the coordinate system in canvas work?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    That should be correct. Here is an example:

    http://jsfiddle.net/hvyvY/

    Please note that you must use the width and height attributes of the HTMLCanvasElement to set its size, like:

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

    NOT the CSS style of that element. Changing the CSS style of the Canvas will scale it instead.

    • 0