This document provides information about an open house hosted by SELA on November 12, 2013 about HTML5 canvas and SVG. The agenda includes an introduction to canvas shapes, states, text and shadows. It also covers SVG, comparisons of canvas and SVG, and examples of WebGL. The document provides code samples and explanations of the canvas API for drawing basic and complex shapes, applying styles, using images and text. It also discusses canvas performance and when to use canvas versus SVG.
1. SELA OPEN HOUSE
November 12, 2013
Canvas
Drawing as Da Vinci on a browser
Sebastian Pederiva
Senior Consultant
@spederiva
Noam Kfir
Senior Consultant
@NoamKfir
http://blogs.microsoft.co.il/blogs/zurdoil
http://noam.kfir.cc
15. States
o Drawing on the Canvas makes use of a stack of drawing
“states”
o A state stores Canvas data of elements drawn
o Transformations and clipping regions use data stored in
states
o Save() and Restore()
o Save()
o Pushes the current state to the stack
o Restore()
o Restores the last state saved from the stack
15
17. Images on Canvas
o Canvas Image API can load in image data and apply
directly to canvas Image data can be cut and sized to
desired portions
o drawImage
o ctx.drawImage(image, dx, dy);
o ctx.drawImage(image, dx, dy, dw, dh);
o ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
o getImageData
o ctx.getImageData(sx, sy, sw, sh);
17
19. Introduction to SVG
• SVG stands for Scalable Vector Graphics
• Defines graphics by using an XML model;
embedded in HTML by using an <svg> tag
• Vector Based
• Use Geometry
• Is part of the DOM
• Can be used from an external .svg
• Became a recommendation of W3C in 2001, and
re-edited in 2011
19
Use getContext() to access the 2D rendering context
Uses the standard screen-based coordinate systemarcToFor example an rounded box
Sample: Simple.html
Sample: Gradient.html
Paths are a list of subpathsSubpaths are one or more points connected by lines (straight or curved)Creating pathsBeginPath - Function call to start a pathClosePath - Function call to end a path
Sample: Complex.htm
The state includes the current transform, Fill colorsstroke colorscurrent fontfew other variables. You can save this state by pushing it onto a stack using the save() function
WebGL makes it possible to display amazing realtime 3D graphicsWhat many people don't know is that WebGL is actually a 2D API, not a 3D API. WebGL only cares about 2 things. Clipspace coordinates in 2DColors