This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).
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
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
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 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 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
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)
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
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)
iivanoo
ikezoemakoto
shimastripe
nagworld
kazumax55
adavis
masakamayama
wernerkrauss
mixi_engineers
tkmnzm
yokawasa
yurihondo
kurochan
bkeepers
philhawksworth
palkan
marktimemedia
tanoku
jcasabona
chriscoyier
deanohume
sstephenson
eileencodes
tammielis