Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javascript Canvas API


Published on

Learning HTML5 api in few minutes.

Published in: Education
  • Be the first to comment

Javascript Canvas API

  1. 1. By : Samuel Santos | email : Blog : The canvas drawing API
  2. 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. 3. The canvas coordinate system • To know how to position objects on canvas, it is necessary to understand the canvas coordinate system.
  4. 4. The canvas coordinate system • The canvas coordinate system is somewhat different from the usual Cartesian system of coordinates in math.
  5. 5. The canvas coordinate system
  6. 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. 7. The canvas coordinate system
  8. 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. 9. The canvas context • The object that allows access to the canvas drawing API is the canvas rendering context.
  10. 10. The canvas context • The API is nothing but a collection of properties and methods of that object.
  11. 11. The canvas context • how to access the canvas context: var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d');
  12. 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. 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. 14. Drawing lines and curves • The lineWidth property specifies the line thickness in pixels. The default value is 1. context.lineWidth = 2;
  15. 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. 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. 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. 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. 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. 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. 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. 22. Drawing lines and curves • The stroke() method renders the current subpath using the current stroke styles. context.stroke ();
  23. 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. 24. Creating fills • The fill() method fills subpaths using the current fill style. context.fill();
  25. 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) ;