Learning HTML5 api in few minutes.

1. By : Samuel Santos | email : thiagsamuel@gmail.com
Blog : http://samueltcsantos.blogspot.com
The canvas drawing API

2. Canvas
• In the real world things exist in space. In the
HTML5 world the equivalent is that objects
exist on the canvas element.

3. The canvas coordinate system
• To know how to position objects on canvas,
it is necessary to understand the canvas
coordinate system.

4. The canvas coordinate system
• The canvas coordinate system is
somewhat different from the usual
Cartesian system of coordinates in math.

5. The canvas coordinate system

6. The canvas coordinate system
• Another oddity in the canvas coordinate
system is that angles are measured in a
clockwise sense from the direction of
the positive x-axis

7. The canvas coordinate system

8. The canvas drawing API
• The canvas drawing application
programming interface (API) allows you to
draw things such as shapes and fills using
JavaScript.

9. The canvas context
• The object that allows access to the
canvas drawing API is the canvas
rendering context.

10. The canvas context
• The API is nothing but a collection of
properties and methods of that
object.

11. The canvas context
• how to access the canvas context:
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

12. Drawing lines and curves
• The following are a few essential
properties and methods of the canvas
context for drawing basic shapes using
lines and curves.

13. Drawing lines and curves
• The strokeStyle property specifies the line
color in CSS-style format.
• The default value is '#000000' (black).
context.strokeStyle = '#0000ff';

14. Drawing lines and curves
• The lineWidth property specifies the line
thickness in pixels. The default value is 1.
context.lineWidth = 2;

15. Drawing lines and curves
• The beginPath() method resets the current
path. A path is a collection of subpaths.
• Each subpath is a set of points connected
by straight or curved lines.
context.beginPath() ;

16. Drawing lines and curves
• The closePath() method closes the current
subpath and starts a new one from the
end of the closed subpath.
context.closePath() ;

17. Drawing lines and curves
• The moveTo(x, y) method moves the cursor
to the specified location (x, y) without
drawing anything, that is, it creates a new
subpath from the specified point.
context.moveTo(x,y) ;

18. Drawing lines and curves
• The lineTo(x, y) method draws a straight
line from the current location to the new
location (x, y) , that is, it adds a new point to
a subpath and connects that point to the
previous point in the subpath with a straight
line.
context.lineTo(x,y) ;

19. Drawing lines and curves
• The arc (x, y, radius, startAngle, endAngle,
anticlockwise) method adds an arc to the
path with center (x, y), and of the specified
radius. The starting and ending angles are in
radians. The anticlockwise parameter is a
boolean: if true, the arc is drawn in a
counterclockwise direction; if false, it is drawn
in a clockwise direction.
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);

20. Drawing lines and curves
• The rect(x, y, w, h) method creates a new
closed rectangular subpath with the upper-
left corner at (x, y) and width w and height h.
context.rect(x, y, w, h);

21. Drawing lines and curves
• The strokeRect(x, y, w, h) method
combines the last two methods to
render an outline of the specified
rectangle.
context.stroke Rect(x,y,w,h);

22. Drawing lines and curves
• The stroke() method renders the current
subpath using the current stroke styles.
context.stroke ();

23. Creating fills
• The fillStyle property gets or sets the style
for filling shapes. It can be a color or a
gradient.
context.fillStyle = ‘#333’;

24. Creating fills
• The fill() method fills subpaths using the
current fill style.
context.fill();

25. Creating fills
• The fillRect(x, y, w, h) method creates a filled
rectangle with the upper-left corner at (x, y)
and width w and height h, using the
current fill style.
context. fillRect(x, y, w, h) ;