HTML5 Canvas Coordinates

 The HTML5 canvas has X-Axis and Y-Axis and is two dimensional. It has starting point in the upper-left corner which acts as origin for any element, action that will be part of canvas. See picture for more details:

 Canvas Coordinates

You can see that coordinates positioned at the upper left corner and X and Y axis points are set to 0 pixels. Lower right corner has been set to 16 pixels. Any item that will be part of this canvas is going to be positioned with accordance to this coordinates of the HTML5 canvas.

The HTML5 canvas useful way to displaying data, but it should not be overused if standard elements of HTML5 can be used. For instance, canvas will be overkill if you can use H1 or TITLE HTML5 tags.

Featured pages


Learn about HTML5 architecture, design principles and patterns on HTML5 Overview Tutorial. Become …


Learn about HTML5 tags and discover a new list of HTML5 tags. Find out about HTML5 tags support by…


 Learn HTML5 development techniques, tips and tricks on our website. Find out what is required…

Date Time Picker

HTML5 forms use date and time controls regularly. HTML5 date and time controls are used by booking …