canvas in html5 Coordinates

HTML Canvas Tutorial Canvas Coordinates

Canvas Coordinates

canvas in html5 has coordinates x and y.The upper-left corner of canvas has (0,0) coordinates.Say for example if we say fillRect (0,0,150,75) this means draw from upper-left corner (0,0) and draw 150 * 75 pixels rectangle.

Draw A Line

To draw a straight line on canvas use following methods:

• move to(x,y):Defines starting point of line
• line to(x,y):defines ending point of line.
• ink:To actually draw line you must use ink method called stroke.

The following example shows how to draw line:

---

Draw A Circle

To Draw a circle on canvas use following methods:

• beginPath();
• Arc(x,y,r,start,stop)
• Stroke:Use stroke method to actually draw the circle.

The following example shows how to draw circle:

---

• canvas in html5 Text