Canvas
Canvas allows you to draw anything inside the browser
http://bit.ly/Ie4HKu
http://bit.ly/LUKXkr
http://bit.ly/LULa79
http://bit.ly/LC8AgY
Slide 4
Slide 4 text
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, apply
transformations, etc.
http://bit.ly/KsKLv1
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
Coordinate System
Canvas uses the standard screen coordinate system
http://bit.ly/KsNip6
Slide 7
Slide 7 text
toDataUrl()
image/png
Slide 8
Slide 8 text
Context
It is the built-in Javascript object
for the canvas HTML element
It has methods to draw lines,
2D or WebGL
available contexts
It has methods to draw lines,
boxes, circles, and more
push state on state stack
pop state from the stack and restore it
Colors & Style
we can style any shape
within the canvas
Slide 11
Slide 11 text
Colors & Style
the distance between the inner
corner and the outer corner in a line
Slide 12
Slide 12 text
Colors & Style
you can use this objects as a value
to strokeStyle or fillStyle
creates a pattern
from an image
from an image
[repeat |
repeat-x |
repeat-y
| no-repeat]
Specifies the gradient's
position and color
Drawing Rectangles
All pixels inside this area
will be erased
Creates a filled
rectangle
Creates an empty rectangle
Slide 16
Slide 16 text
Drawing Complex Shapes
A complex shape is represented by a Path
Path
Path
Path, where a
path is a list of subpaths
path is a list of subpaths
Subpaths
Subpaths
Subpaths
Subpaths are one or more points connected by straight
or curved lines
The rendering context has always a current path
http://bit.ly/KsSc5q
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
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)
Slide 19
Slide 19 text
Paths (continued)
Creates an arc
between two points
draws along a circle
creates a
rectangle
checks if the given point is
in the path
Images
draw the image, and
specify the width and
height
clip the image, draw it,
and specify the width
and specify the width
and height
Slide 23
Slide 23 text
Pixels
Creates 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)
Transformations
scale 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 not
relative to past
transforms
Slide 27
Slide 27 text
A word on radians
A Radian
Radian
Radian
Radian is the ratio between the length of an arc and
its radius
its radius
x degrees = x * PI/180
Text draws text on the
canvas, and fills it
with the color set by
the fillStyle
attribute
attribute
draws text on the
canvas, without
filling, using the
color of the
strokeStyle
strokeStyle
attribute
measures the given text string
(returns the result in pixels)
Slide 30
Slide 30 text
Text
sets the font
(same syntax of CSS)
align text on the
canvas
canvas
vertical alignment of
the text