Downloaded 10 times
Uploaded bySamuel Santos
Javascript Canvas API
The document discusses the canvas drawing API in HTML5. It describes the canvas coordinate system, which differs from the standard Cartesian system used in math. Angles are measured clockwise from the positive x-axis. The canvas context object provides access to drawing methods like lineTo(), rect(), arc(), and fillStyle. Basic shapes can be drawn using lines, curves, rectangles, and fills on the canvas element.
More Related Content
Similar to Javascript Canvas API
Javascript Canvas API
- 1. By : SamuelSantos | email : thiagsamuel@gmail.com Blog : http://samueltcsantos.blogspot.com The canvas drawing API
- 2. Canvas • In thereal world things exist in space. In the HTML5 world the equivalent is that objects exist on the canvas element.
- 3. The canvas coordinatesystem • To know how to position objects on canvas, it is necessary to understand the canvas coordinate system.
- 4. The canvas coordinatesystem • The canvas coordinate system is somewhat different from the usual Cartesian system of coordinates in math.
- 5. The canvas coordinatesystem
- 6. The canvas coordinatesystem • 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 coordinatesystem
- 8. The canvas drawingAPI • 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 andcurves • The following are a few essential properties and methods of the canvas context for drawing basic shapes using lines and curves.
- 13. Drawing lines andcurves • The strokeStyle property specifies the line color in CSS-style format. • The default value is '#000000' (black). context.strokeStyle = '#0000ff';
- 14. Drawing lines andcurves • The lineWidth property specifies the line thickness in pixels. The default value is 1. context.lineWidth = 2;
- 15. Drawing lines andcurves • 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 andcurves • The closePath() method closes the current subpath and starts a new one from the end of the closed subpath. context.closePath() ;
- 17. Drawing lines andcurves • 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 andcurves • 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 andcurves • 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 andcurves • 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 andcurves • 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 andcurves • The stroke() method renders the current subpath using the current stroke styles. context.stroke ();
- 23. Creating fills • ThefillStyle property gets or sets the style for filling shapes. It can be a color or a gradient. context.fillStyle = ‘#333’;
- 24. Creating fills • Thefill() method fills subpaths using the current fill style. context.fill();
- 25. Creating fills • ThefillRect(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) ;