javascript canvas api

By : Samuel Santos | email : [email protected] : 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 objectsexist on the canvas element.

The canvas coordinate system

• To know how to position objects on canvas,

it is necessary to understand the canvascoordinate system.


• The canvas coordinate system is

somewhat different from the usual

Cartesian system of coordinates in math.


• 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 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 canvascontext for drawing basic shapes using

lines and curves.


• The strokeStyle property specifies the linecolor in CSS-style format.

• The default value is '#000000' (black).

context.strokeStyle = '#0000ff';


• The lineWidth property specifies the line

thickness in pixels. The default value is 1.

context.lineWidth = 2;


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


• The closePath() method closes the current

subpath and starts a new one from the

end of the closed subpath.

context.closePath() ;


• The moveTo(x, y) method moves the cursor

to the specified location (x, y) without

drawing anything, that is, it creates a newsubpath from the specified point.

context.moveTo(x,y) ;


• 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 toa subpath and connects that point to theprevious point in the subpath with a straightline.

context.lineTo(x,y) ;


• The arc (x, y, radius, startAngle, endAngle,anticlockwise) method adds an arc to thepath with center (x, y), and of the specifiedradius. The starting and ending angles are inradians. The anticlockwise parameter is a

boolean: if true, the arc is drawn in acounterclockwise direction; if false, it is drawnin a clockwise direction.

context.arc(x, y, radius, startAngle, endAngle, anticlockwise);


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


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


• 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 agradient.

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

Education