KEMBAR78
Javascript Canvas API | PPTX
By : Samuel Santos | email : thiagsamuel@gmail.com
Blog : http://samueltcsantos.blogspot.com
The canvas drawing API
Canvas
• In the real world things exist in space. In the
HTML5 world the equivalent is that objects
exist on the canvas element.
The canvas coordinate system
• To know how to position objects on canvas,
it is necessary to understand the canvas
coordinate system.
The canvas coordinate system
• The canvas coordinate system is
somewhat different from the usual
Cartesian system of coordinates in math.
The canvas coordinate system
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
The canvas coordinate system
The canvas drawing API
• The canvas drawing application
programming interface (API) allows you to
draw things such as shapes and fills using
JavaScript.
The canvas context
• The object that allows access to the
canvas drawing API is the canvas
rendering context.
The canvas context
• The API is nothing but a collection of
properties and methods of that
object.
The canvas context
• how to access the canvas context:
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
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.
Drawing lines and curves
• The strokeStyle property specifies the line
color in CSS-style format.
• The default value is '#000000' (black).
context.strokeStyle = '#0000ff';
Drawing lines and curves
• The lineWidth property specifies the line
thickness in pixels. The default value is 1.
context.lineWidth = 2;
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() ;
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() ;
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) ;
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) ;
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);
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);
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);
Drawing lines and curves
• The stroke() method renders the current
subpath using the current stroke styles.
context.stroke ();
Creating fills
• The fillStyle property gets or sets the style
for filling shapes. It can be a color or a
gradient.
context.fillStyle = ‘#333’;
Creating fills
• The fill() method fills subpaths using the
current fill style.
context.fill();
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) ;

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.
  • 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.
  • 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) ;