SlideShare una empresa de Scribd logo
1 de 33
SELA OPEN HOUSE
June 9, 2013
Canvas
Sebastian Pederiva
Senior Consultant
@spederiva
blogs.microsoft.co.il/blogs/zurdoil
Drawing as Da Vinci on a browser
Agenda
1. Canvas
• Shapes
• States
• Text & Shadows
2. SVG
• Introduction
• Samples
3. Canvas vs. SVG
4. WebGL
• Samples
Canvas
• An HTML5 element that allows for
dynamic, scriptable rendering of 2D shapes and
bitmaps
• Simple API: 45 methods, 21 attributes
• Supported by modern browsers
• Created by Apple
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 3
Canvas Browser Support
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 4
Easy to Make Things Like:
<body>
<canvas height=”600”
width=”800”></canvas>
</body>
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 5
Canvas API
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 6
save
restore
scale
rotate
translate
transform
setTransform
globalAlpha
globalCompositeOperation
strokeStyle
fillStyle
CanvasGradient createLinearGradient
CanvasGradient createRadialGradient
CanvasPattern createPattern
lineWidth
lineCap
lineJoin
miterLimit
drawFocusRing
shadowOffsetX
shadowOffsetY
shadowBlur
shadowColor
clearRect
fillRect
strokeRect
beginPath
closePath
moveTo
lineTo
quadraticCurveTo
bezierCurveTo
arcTo
rect
arc
fill
stroke
clip
isPointInPath
drawImage
font
textAlign
textBaseline
fillText
strokeText
TextMetrics measureText
ImageData createImageData
ImageData createImageData
ImageData getImageData
putImageData
addColorStop
width
width
height
CanvasPixelArray data
length
getter
setter
var canvas =
document.getElementById("canvas");
var ctx = canvas.getContext("2d");
Getting the Context (APIs)
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 7
Drawing Simple Shapes
• Lines
o lineTo - Draws a straight line from the previous point
• Rectangles
o fillRect - draw filled rectangles
o strokeRect - draw the borders of a rectangle
o clearRect - Clears the specified area making it fully
transparent
• Circles & Arcs
o arc – draw an arc without dependencies
o arcTo – draw an arc connected to the previous point
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 8
Drawing Simple Shapes:
Examples
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 9
//Draw a circumference
cxt.arc(50, 50, 50, 0, Math.PI * 2, true);
cxt.stroke();
//Draw a diagonal
cxt.moveTo(0, 0);
cxt.lineTo(500, 500);
cxt.stroke();
//Draw a rectangle
cxt.strokeRect(50, 250, 150, 100);
• Styles
o fillStyle - set the colors used for rendering filled shapes
o strokeStyle - set the colors used for rendering strokes
• Gradient
o createLinearGradient – create a linear gradient
object
o createRadialGradient – create a radial gradient
object
Shape Styles
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 10
Shape Styles: Examples
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 11
//Linear Gradient
var grad = cxt.createLinearGradient(0, 0, 200, 0);
grad.addColorStop(0, 'yellow');
grad.addColorStop(1, 'blue');
cxt.fillStyle = grad;
cxt.fillRect(50, 250, 150, 100);
//Radial Gradient
var grd = context.createRadialGradient(150, 150, 0, 150, 150, 200);
grd.addColorStop(0, "red");
grd.addColorStop(1, "blue");
context.fillStyle = grd;
context.fillRect(0, 0, 300, 300);
DescriptionAttribute
Draws a straight line from the previous pointlineTo(x, y)
Adds a new closed subpath representing the given rectanglerect(x, y, w, h)
Adds an arc described by the circumference of the circle described by
the arguments
arc(x, y, radius, startAngle,
endAngle, anticlockwise)
Adds a subpath connecting two points by an arc of the defined radiusarcTo(x1, y1, x2, y2, radius)
Adds cubic Bézier curve connected to the previous point with the given
control points.
bezierCurveTo(cp1x, cp1y, cp2x,
cp2y, x, y)
Adds a quadratic Bézier curve with the given control pointsquadraticCurveTo(cpx, cpy, x, y)
Complex Shapes
• Path & Subpath
• Paths are points connected by lines (straight or
curved)
• BeginPath & ClosePath
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 12
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 13
Complex Shapes
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
14
Text & Pattern
• Creating a Pattern – use the
createPattern(image, repetition) function
• fillText and strokeText – use for text creation
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 15
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);
16
Canvas Pitfalls
• Canvas is stupid – no memory of what you drew
last
• Not all operations were created equal. Some are
more expensive than others
– Shadows, clipping and composition operations are
more expensive as they require an additional
intermediate
• Use feature detection to detect a canvas and
available features
• Reading and writing to video memory is slow
• Avoid setting attributes unnecessarily
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 17
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
18
SVG – Browser Support
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 19
SVG Sample
20
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<rect fill="red" x="20" y="20" width="100" height="75" />
<rect fill="blue" x="50" y="50" width="100" height="75" />
</svg>
21
SVG is awesome!
Canvas vs. SVG
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 22
When to Use Canvas?
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 23
Screen Capture
Complex
scenes, lots of
objects
Video
Manipulation
Web Advertising
Interactive
Charts, Graphs
Static Images
High-Fidelity
Documents for
Viewing, Printing
2D Gaming
Performance Comparison
24
WebGL
• Enables 3D graphics
• Conforms to OpenGL ES 2.0
• Used in HTML5 canvas elements
• Supported in Firefox 4 and above and Chrome 9
and above
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 25
WebGL – Browser Support
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 26
WebGL
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 27
var canvas = document.getElementById("glcanvas");
initWebGL(canvas); // Initialize the GL context
// Only continue if WebGL is available and working
if (gl) {
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Set clear color to black, fully opaque
gl.enable(gl.DEPTH_TEST); // Enable depth testing
gl.depthFunc(gl.LEQUAL); // Near things obscure far things
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); // Clear the color as well as the depth buffer.
}
function initWebGL(canvas) {
// Initialize the global variable gl to null.
gl = null;
try {
// Try to grab the standard context. If it fails, fallback to experimental.
gl = canvas.getContext("webgl");
}
catch(e) {}
// If we don't have a GL context, give up now
if (!gl) {
console.log("Unable to initialize WebGL. Your browser may not support it.");
}
}
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 28
WebGL Example
http://lab.aerotwist.com/webgl/undulating-monkey/
http://inear.se/beanstalk/
Resources
29
Articles
1. www.html5canvastutorials.com
2. html5doctor.com/an-introduction-to-the-canvas-2d-api/
3. http://joshondesign.com/p/books/canvasdeepdive/toc.html
4. fhtr.org/canvasfilters
5. westciv.com
6. www.canvasdemos.com
7. http://www.html5gamedevelopment.com / http://html5gameengine.com
8. http://www.sitepoint.com/gaming-battle-on-the-high-seas-part-1/
9. http://www.sitepoint.com/the-complete-guide-to-building-html5-games-with-canvas-and-svg/
10. http://labs.skookum.com/demos/barcampclt_physics/
Frameworks
1. www.kineticjs.com
2. easeljs.com
3. pixastic.com
4. paperjs.org
5. raphaeljs.com
Samples
30
1. www.cuttherope.ie
2. www.drawastickman.com
3. www.lucidchart.com/pages/examples/flowchart_software
4. slides.html5rocks.com/#canvas-2d-example
5. www.picozu.com/editor
6. www.neave.com/webcam/html5
7. worldsbiggestpacman.com
8. www.visitnmc.com
9. disneydigitalbooks.go.com/tron
10. mudcu.be/sketchpad
11. snappyTree
12. SVG Filter Effects
13. n-e-r-v-o-u-s.com/cellCycle/
14. http://jsfiddle.net/g105b/Z4TFh/
Q & A
Let’s Play!
Summary
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 33
The Canvas is a new HTML5 element
that brings a lot of power to the
client side
It enables an interactive drawing
surface
The future: Hardware-Accelerated
HTML5 Canvas
We made a game!

Más contenido relacionado

Similar a HTML5 Graphics

Building your first windows store app in html5 js phonegap
Building your first windows store app in html5 js phonegapBuilding your first windows store app in html5 js phonegap
Building your first windows store app in html5 js phonegapShai Raiten
 
Make your own Print & Play card game using SVG and JavaScript
Make your own Print & Play card game using SVG and JavaScriptMake your own Print & Play card game using SVG and JavaScript
Make your own Print & Play card game using SVG and JavaScriptKevin Hakanson
 
SnapyX
SnapyXSnapyX
SnapyXekino
 
WT-4069, WebCL: Enabling OpenCL Acceleration of Web Applications, by Mikael ...
WT-4069, WebCL: Enabling OpenCL Acceleration of Web Applications, by  Mikael ...WT-4069, WebCL: Enabling OpenCL Acceleration of Web Applications, by  Mikael ...
WT-4069, WebCL: Enabling OpenCL Acceleration of Web Applications, by Mikael ...AMD Developer Central
 
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Patrick Chanezon
 
JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3Helder da Rocha
 
Css3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQueryCss3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQueryAndrea Verlicchi
 
Neptue Graph Database - 0 to Production
Neptue Graph Database - 0 to ProductionNeptue Graph Database - 0 to Production
Neptue Graph Database - 0 to Productionisraelio
 
Ballerina Serverless with Kubeless
Ballerina Serverless with KubelessBallerina Serverless with Kubeless
Ballerina Serverless with KubelessWSO2
 
Ballerina Serverless with Kubeless
Ballerina Serverless with KubelessBallerina Serverless with Kubeless
Ballerina Serverless with KubelessBallerina
 
About OpenGL and Vulkan interoperability (XDC 2020)
About OpenGL and Vulkan interoperability (XDC 2020)About OpenGL and Vulkan interoperability (XDC 2020)
About OpenGL and Vulkan interoperability (XDC 2020)Igalia
 
Asset Pipeline in Ruby on Rails
Asset Pipeline in Ruby on RailsAsset Pipeline in Ruby on Rails
Asset Pipeline in Ruby on RailsRORLAB
 
Ilya Ivanov - Advanced React-Native
Ilya Ivanov - Advanced React-NativeIlya Ivanov - Advanced React-Native
Ilya Ivanov - Advanced React-NativeOdessaJS Conf
 
Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012philogb
 
Training di Base Neo4j
Training di Base Neo4jTraining di Base Neo4j
Training di Base Neo4jNeo4j
 

Similar a HTML5 Graphics (20)

Building your first windows store app in html5 js phonegap
Building your first windows store app in html5 js phonegapBuilding your first windows store app in html5 js phonegap
Building your first windows store app in html5 js phonegap
 
Make your own Print & Play card game using SVG and JavaScript
Make your own Print & Play card game using SVG and JavaScriptMake your own Print & Play card game using SVG and JavaScript
Make your own Print & Play card game using SVG and JavaScript
 
SnapyX
SnapyXSnapyX
SnapyX
 
SnapyX - ParisJS
SnapyX - ParisJSSnapyX - ParisJS
SnapyX - ParisJS
 
WT-4069, WebCL: Enabling OpenCL Acceleration of Web Applications, by Mikael ...
WT-4069, WebCL: Enabling OpenCL Acceleration of Web Applications, by  Mikael ...WT-4069, WebCL: Enabling OpenCL Acceleration of Web Applications, by  Mikael ...
WT-4069, WebCL: Enabling OpenCL Acceleration of Web Applications, by Mikael ...
 
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
Play framework
Play frameworkPlay framework
Play framework
 
JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3
 
Css3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQueryCss3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQuery
 
Neptue Graph Database - 0 to Production
Neptue Graph Database - 0 to ProductionNeptue Graph Database - 0 to Production
Neptue Graph Database - 0 to Production
 
Waleed cv gis[17]
Waleed cv gis[17]Waleed cv gis[17]
Waleed cv gis[17]
 
Ballerina Serverless with Kubeless
Ballerina Serverless with KubelessBallerina Serverless with Kubeless
Ballerina Serverless with Kubeless
 
Ballerina Serverless with Kubeless
Ballerina Serverless with KubelessBallerina Serverless with Kubeless
Ballerina Serverless with Kubeless
 
About OpenGL and Vulkan interoperability (XDC 2020)
About OpenGL and Vulkan interoperability (XDC 2020)About OpenGL and Vulkan interoperability (XDC 2020)
About OpenGL and Vulkan interoperability (XDC 2020)
 
Asset Pipeline in Ruby on Rails
Asset Pipeline in Ruby on RailsAsset Pipeline in Ruby on Rails
Asset Pipeline in Ruby on Rails
 
Ilya Ivanov - Advanced React-Native
Ilya Ivanov - Advanced React-NativeIlya Ivanov - Advanced React-Native
Ilya Ivanov - Advanced React-Native
 
HTML5 - A Whirlwind tour
HTML5 - A Whirlwind tourHTML5 - A Whirlwind tour
HTML5 - A Whirlwind tour
 
Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012
 
Training di Base Neo4j
Training di Base Neo4jTraining di Base Neo4j
Training di Base Neo4j
 

Último

UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
20200723_insight_release_plan
20200723_insight_release_plan20200723_insight_release_plan
20200723_insight_release_planJamie (Taka) Wang
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 

Último (20)

UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
20200723_insight_release_plan
20200723_insight_release_plan20200723_insight_release_plan
20200723_insight_release_plan
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 

HTML5 Graphics

  • 1. SELA OPEN HOUSE June 9, 2013 Canvas Sebastian Pederiva Senior Consultant @spederiva blogs.microsoft.co.il/blogs/zurdoil Drawing as Da Vinci on a browser
  • 2. Agenda 1. Canvas • Shapes • States • Text & Shadows 2. SVG • Introduction • Samples 3. Canvas vs. SVG 4. WebGL • Samples
  • 3. Canvas • An HTML5 element that allows for dynamic, scriptable rendering of 2D shapes and bitmaps • Simple API: 45 methods, 21 attributes • Supported by modern browsers • Created by Apple © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 3
  • 4. Canvas Browser Support © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 4
  • 5. Easy to Make Things Like: <body> <canvas height=”600” width=”800”></canvas> </body> © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 5
  • 6. Canvas API © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 6 save restore scale rotate translate transform setTransform globalAlpha globalCompositeOperation strokeStyle fillStyle CanvasGradient createLinearGradient CanvasGradient createRadialGradient CanvasPattern createPattern lineWidth lineCap lineJoin miterLimit drawFocusRing shadowOffsetX shadowOffsetY shadowBlur shadowColor clearRect fillRect strokeRect beginPath closePath moveTo lineTo quadraticCurveTo bezierCurveTo arcTo rect arc fill stroke clip isPointInPath drawImage font textAlign textBaseline fillText strokeText TextMetrics measureText ImageData createImageData ImageData createImageData ImageData getImageData putImageData addColorStop width width height CanvasPixelArray data length getter setter
  • 7. var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); Getting the Context (APIs) © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 7
  • 8. Drawing Simple Shapes • Lines o lineTo - Draws a straight line from the previous point • Rectangles o fillRect - draw filled rectangles o strokeRect - draw the borders of a rectangle o clearRect - Clears the specified area making it fully transparent • Circles & Arcs o arc – draw an arc without dependencies o arcTo – draw an arc connected to the previous point © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 8
  • 9. Drawing Simple Shapes: Examples © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 9 //Draw a circumference cxt.arc(50, 50, 50, 0, Math.PI * 2, true); cxt.stroke(); //Draw a diagonal cxt.moveTo(0, 0); cxt.lineTo(500, 500); cxt.stroke(); //Draw a rectangle cxt.strokeRect(50, 250, 150, 100);
  • 10. • Styles o fillStyle - set the colors used for rendering filled shapes o strokeStyle - set the colors used for rendering strokes • Gradient o createLinearGradient – create a linear gradient object o createRadialGradient – create a radial gradient object Shape Styles © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 10
  • 11. Shape Styles: Examples © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 11 //Linear Gradient var grad = cxt.createLinearGradient(0, 0, 200, 0); grad.addColorStop(0, 'yellow'); grad.addColorStop(1, 'blue'); cxt.fillStyle = grad; cxt.fillRect(50, 250, 150, 100); //Radial Gradient var grd = context.createRadialGradient(150, 150, 0, 150, 150, 200); grd.addColorStop(0, "red"); grd.addColorStop(1, "blue"); context.fillStyle = grd; context.fillRect(0, 0, 300, 300);
  • 12. DescriptionAttribute Draws a straight line from the previous pointlineTo(x, y) Adds a new closed subpath representing the given rectanglerect(x, y, w, h) Adds an arc described by the circumference of the circle described by the arguments arc(x, y, radius, startAngle, endAngle, anticlockwise) Adds a subpath connecting two points by an arc of the defined radiusarcTo(x1, y1, x2, y2, radius) Adds cubic Bézier curve connected to the previous point with the given control points. bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) Adds a quadratic Bézier curve with the given control pointsquadraticCurveTo(cpx, cpy, x, y) Complex Shapes • Path & Subpath • Paths are points connected by lines (straight or curved) • BeginPath & ClosePath © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 12
  • 13. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 13 Complex Shapes
  • 14. 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 14
  • 15. Text & Pattern • Creating a Pattern – use the createPattern(image, repetition) function • fillText and strokeText – use for text creation © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 15
  • 16. 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); 16
  • 17. Canvas Pitfalls • Canvas is stupid – no memory of what you drew last • Not all operations were created equal. Some are more expensive than others – Shadows, clipping and composition operations are more expensive as they require an additional intermediate • Use feature detection to detect a canvas and available features • Reading and writing to video memory is slow • Avoid setting attributes unnecessarily © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 17
  • 18. 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 18
  • 19. SVG – Browser Support © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 19
  • 20. SVG Sample 20 <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"> <rect fill="red" x="20" y="20" width="100" height="75" /> <rect fill="blue" x="50" y="50" width="100" height="75" /> </svg>
  • 22. Canvas vs. SVG © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 22
  • 23. When to Use Canvas? © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 23 Screen Capture Complex scenes, lots of objects Video Manipulation Web Advertising Interactive Charts, Graphs Static Images High-Fidelity Documents for Viewing, Printing 2D Gaming
  • 25. WebGL • Enables 3D graphics • Conforms to OpenGL ES 2.0 • Used in HTML5 canvas elements • Supported in Firefox 4 and above and Chrome 9 and above © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 25
  • 26. WebGL – Browser Support © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 26
  • 27. WebGL © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 27 var canvas = document.getElementById("glcanvas"); initWebGL(canvas); // Initialize the GL context // Only continue if WebGL is available and working if (gl) { gl.clearColor(0.0, 0.0, 0.0, 1.0); // Set clear color to black, fully opaque gl.enable(gl.DEPTH_TEST); // Enable depth testing gl.depthFunc(gl.LEQUAL); // Near things obscure far things gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); // Clear the color as well as the depth buffer. } function initWebGL(canvas) { // Initialize the global variable gl to null. gl = null; try { // Try to grab the standard context. If it fails, fallback to experimental. gl = canvas.getContext("webgl"); } catch(e) {} // If we don't have a GL context, give up now if (!gl) { console.log("Unable to initialize WebGL. Your browser may not support it."); } }
  • 28. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 28 WebGL Example http://lab.aerotwist.com/webgl/undulating-monkey/ http://inear.se/beanstalk/
  • 29. Resources 29 Articles 1. www.html5canvastutorials.com 2. html5doctor.com/an-introduction-to-the-canvas-2d-api/ 3. http://joshondesign.com/p/books/canvasdeepdive/toc.html 4. fhtr.org/canvasfilters 5. westciv.com 6. www.canvasdemos.com 7. http://www.html5gamedevelopment.com / http://html5gameengine.com 8. http://www.sitepoint.com/gaming-battle-on-the-high-seas-part-1/ 9. http://www.sitepoint.com/the-complete-guide-to-building-html5-games-with-canvas-and-svg/ 10. http://labs.skookum.com/demos/barcampclt_physics/ Frameworks 1. www.kineticjs.com 2. easeljs.com 3. pixastic.com 4. paperjs.org 5. raphaeljs.com
  • 30. Samples 30 1. www.cuttherope.ie 2. www.drawastickman.com 3. www.lucidchart.com/pages/examples/flowchart_software 4. slides.html5rocks.com/#canvas-2d-example 5. www.picozu.com/editor 6. www.neave.com/webcam/html5 7. worldsbiggestpacman.com 8. www.visitnmc.com 9. disneydigitalbooks.go.com/tron 10. mudcu.be/sketchpad 11. snappyTree 12. SVG Filter Effects 13. n-e-r-v-o-u-s.com/cellCycle/ 14. http://jsfiddle.net/g105b/Z4TFh/
  • 31. Q & A
  • 33. Summary © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 33 The Canvas is a new HTML5 element that brings a lot of power to the client side It enables an interactive drawing surface The future: Hardware-Accelerated HTML5 Canvas We made a game!

Notas del editor

  1. Use getContext() to access the 2D rendering context
  2. Uses the standard screen-based coordinate systemarcToFor example an rounded box
  3. Sample: Simple.html
  4. Sample: Gradient.html
  5. 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
  6. Sample: Complex.htm
  7. 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
  8. WebGL makes it possible to display amazing realtime 3D graphicsWhat many people don&apos;t know is that WebGL is actually a 2D API, not a 3D API. WebGL only cares about 2 things. Clipspace coordinates in 2DColors