html5 canvas units

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 开发者_JAVA百科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?

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.