Canvas

Ivano MalavoltaIvano Malavolta

ivano.malavolta@univaq.it

http://www.di.univaq.it/malavolta

Roadmap

• Intro

• Colors & Style• Colors & Style

• Drawings

• Images & Pixels

• Transformations

• Text• Text

• Compositing

• Animations

Canvas

Canvas allows you to draw anything inside the browser

http://bit.ly/Ie4HKuhttp://bit.ly/LUKXkrhttp://bit.ly/LULa79http://bit.ly/LC8AgY

Canvas

It uses nothing more than JavaScript and HTML

� no external plugins, no libraries, etc.� no external plugins, no libraries, etc.

You can create lines, use images, use text, applytransformations, etc.

http://bit.ly/KsKLv1

Canvas

A canvas is a rectangular area, where you can control every pixel using JavaScript

Returns a string Returns a string representing an encoded

URL containing the grabbed graphical data

Coordinate System

Canvas uses the standard screen coordinate system

http://bit.ly/KsNip6

toDataUrl()

image/png

Context

It is the built-in Javascript object for the canvas HTML element

It has methods to draw lines,

2D or WebGLavailable contexts

It has methods to draw lines, boxes, circles, and more

push state on state stack

pop state from the stack and restore it

Roadmap

• Intro

• Colors & Style• Colors & Style

• Drawings

• Images & Pixels

• Transformations

• Text• Text

• Compositing

• Animations

Colors & Style

we can style any shapewithin the canvas

Colors & Style

the distance between the inner corner and the outer corner in a line

Colors & Style

you can use this objects as a value to strokeStyle or fillStyle

creates a pattern from an imagefrom an image

[repeat | repeat-x | repeat-y

| no-repeat]Specifies the gradient's

position and color

Gradient Example

Roadmap

• Intro

• Colors & Style• Colors & Style

• Drawings

• Images & Pixels

• Transformations

• Text• Text

• Compositing

• Animations

Drawing Rectangles

All pixels inside this area will be erased

Creates a filledrectangle

Creates an empty rectangle

Drawing Complex Shapes

A complex shape is represented by a PathPathPathPath, where a path is a list of subpathspath is a list of subpaths

SubpathsSubpathsSubpathsSubpaths are one or more points connected by straightor curved lines

The rendering context has always a current path

http://bit.ly/KsSc5q

Paths

Starts a new path, or clears the current path

Creates a line from the last point to the first

point

Fills the current path Fills the current path with the selected color

Draws the path on the canvas

Creates an area in the canvas, and this area is the only visible area in

the canvas

Paths (continued) Moves the path to the specified point (x,y),

without creating a line

Creates a line from the last point in the path to

the given point (x,y)

Creates a quadratic curve Creates a quadratic curve from the current point in the path to the specified

point (x,y)Creates a Bezier curve

from the current point in the path to the specified

point (x,y)

Paths (continued)Creates an arc

between two points

draws along a circle

creates a rectangle

checks if the given point is in the path

Examples

Roadmap

• Intro

• Colors & Style• Colors & Style

• Drawings

• Images & Pixels

• Transformations

• Text• Text

• Compositing

• Animations

Imagesdraw the image, and specify the width and

height

clip the image, draw it, and specify the width and specify the width

and height

PixelsCreates an empty

imagedata object with the given dimensions

Creates a new imagedata object,

containing data from the canvas

Draws imagedata onto the canvas (optionally, you can specify which part of

the imageData you want to put)

Pixels

Roadmap

• Intro

• Colors & Style• Colors & Style

• Drawings

• Images & Pixels

• Transformations

• Text• Text

• Compositing

• Animations

Transformationsscale the canvas, based on

width and height(also positioning is scaled)

rotate the canvas, based on the angle (in radians)

move the canvas horizontally and vertically

this is notrelative to past

transforms

A word on radians

A RadianRadianRadianRadian is the ratio between the length of an arc and its radiusits radius

x degrees = x * PI/180

Roadmap

• Intro

• Colors & Style• Colors & Style

• Drawings

• Images & Pixels

• Transformations

• Text• Text

• Compositing

• Animations

Text draws text on the canvas, and fills it

with the color set by the fillStyleattributeattribute

draws text on the canvas, without filling, using the

color of the strokeStylestrokeStyleattribute

measures the given text string (returns the result in pixels)

Textsets the font

(same syntax of CSS)

align text on the canvascanvas

vertical alignment of the text

Roadmap

• Intro

• Colors & Style• Colors & Style

• Drawings

• Images & Pixels

• Transformations

• Text• Text

• Compositing

• Animations

Compositing

transparency transparency of the drawings

how drawings are how drawings are positioned onto the

canvas

Roadmap

• Intro

• Colors & Style• Colors & Style

• Drawings

• Images & Pixels

• Transformations

• Text• Text

• Compositing

• Animations

Animations

determines the optimal FPS for our optimal FPS for our

animation

References

http://www.w3schools.com/html5/html5_ref_canvas.asphttp://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf