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
Recommended
