SlideShare a Scribd company logo
HTML5 Canvas

    The Future of
 Graphics on the Web
Rob Hawkes
         @robhawkes for you social media folk
         rawkes.com if you want to see more


The  place  to  be                       Yes,  that’s  me
                                       looking  horrible




  AKA.  Layabout                           Guess  my
                                          middle  name
“Canvas is my favourite part
  of HTML5, alongside its
 video and audio support”
                Myself, at some point
So what is canvas?
An overview of canvas

✽   2D drawing platform within the browser
✽   Uses nothing more than JavaScript and
    HTML – no plugins
✽   Extensible through a JavaScript API
✽   Created by Apple for dashboard widgets
✽   Now openly developed as a W3C spec
Bitmap vs. vector
✽   Canvas is a bitmap system
    •   Everything is drawn as a single, flat, picture
    •   Changes require the whole picture to be redrawn

✽   SVG is a vector system
    •   Elements to be drawn are separate DOM objects
    •   They can be manipulated individually

✽   SVG isn’t part of HTML5
    •   Future isn’t as rosy as canvas’
Browser support
✽   Most modern browsers
    •   Safari
    •   Chrome
    •   Firefox
    •   Opera

✽   No Internet Explorer support by default
    •   However, there are hacks to get it working
What is it for?
Data visualisation
Animated graphics
Web applications
Games
Here’s something I made earlier
Getting started
Created using the new HTML5 tag



<canvas height=”600” width=”800”></canvas>



      Height  and  width  need  to  be  set  explicitly
(0,0)
              x




    y




Uses the standard screen-based
       coordinate system
Everything is drawn onto the
          2D rendering context (ctx)




               2D rendering context
Canvas
Use getContext() to access the
           2D rendering context



var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");



         This  is  your  friend
ctx.fillStyle = 'rgb(255, 0, 0)';
ctx.strokeStyle = 'rgba(0, 255, 0, 0.5)';



                         Use  RGBA  for  alpha
                         transparency




fillStyle() and strokeStyle() define
   the style of shapes to be drawn
Simple shapes

Method                   Action
fillRect(x, y, w, h)      Draws a rectangle using the current fill style

strokeRect(x, y, w, h)   Draws the outline of a rectangle using the current
                         stroke style
clearRect(x, y, w, h)    Clears all pixels within the given rectangle




   Simple shapes are drawn without
      effecting the current path
ctx.fillStyle = ‘rgb(65, 60, 50)’;
ctx.fillRect(25, 50, 100, 100);

ctx.strokeStyle = ‘rgb(65, 60, 50)’;
ctx.strokeRect(130, 500, 40, 70);




                500



          130
Complex shapes & paths
✽   Paths are a list of subpaths
✽   Subpaths are one or more points
    connected by straight or curved lines
✽   Rendering context always has a current
    path
✽   A new path should be created for each
    individual shape
Complex shapes & paths

Method         Action
beginPath()    Resets the current path

closePath()    Closes the current subpath and starts a new one

moveTo(x, y)   Creates a new subpath at the given point

fill()          Fills the subpaths with the current fill style

stroke()       Outlines the subpaths with the current stroke style
Complex shapes & paths

Method                          Action
lineTo(x, y)                    Draws a straight line from the previous point

rect(x, y, w, h)                Adds a new closed rectangular subpath

arc(x, y, radius, startAngle,   Adds a subpath along the circumference of
endAngle, anticlockwise)        the described circle, within the angles defines
arcTo(x1, y1, x2, y2, radius)   Adds a subpath connecting two points by an
                                arc of the defined radius
bezierCurveTo(cp1x, cp1y,       Adds a cubic Bézier curve with the given
cp2x, cp2y, x, y)               control points
quadraticCurveTo(cpx,           Adds a quadratic Bézier curve with the given
cpy, x, y)                      control points
ctx.strokeStyle = ‘rgb(65, 60, 50)’;
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.stroke();



             50

        50         100




             100
ctx.fillStyle = ‘rgb(65, 60, 50)’;
ctx.beginPath();
ctx.arc(100, 100, 30, 0, Math.PI*2, true);
ctx.fill();




                 100




           100

                       30
ctx.strokeStyle = ‘rgb(65, 60, 50)’;
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.bezierCurveTo(70, 50, 130, 150, 150, 100);
ctx.stroke();



                        cp1
                  100



             50




                              cp2
Other cool stuff

✽   Text
✽   Shadows & blurring
✽   Line styles; width, cap, etc.
✽   Saving state of drawing context
✽   Transformations
Pixel manipulation
Images can be drawn onto the canvas

ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx, dy, dw, dh);
ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);


          sy
     sx

                    sh        dy

               sw
                         dx
                                              Canvas
                                        dh


                                   dw
 Source
  image
Individual pixel values can be retrieved


           ctx.getImageData(sx, sy, sw, sh);




      sy

 sx

                                   Returns an array
                 sh
                                   of pixel values
            sw
Canvas ambilight
Making things move
Harnessing the power

✽   Remember all the shapes on the canvas
✽   Move them, transform them, and make
    them interact
✽   Redraw the all the shapes in their new
    positions
✽   Rinse and repeat, really quickly
My workflow
✽   Treat each shape as a JavaScript object
✽   Each shape object has position values
✽   Store the shape objects in an array
✽   Run a timeout function every 40 ms
✽   Clear the canvas
✽   Make any changes to the shape objects
✽   Loop through and redraw every shape
The future of canvas
The future of canvas
✽   OOP programming allows much to be
    achieved through canvas
✽   It’s flexible and powerful
    •   Animation engines
    •   Pseudo 3D graphics

✽   Reading pixel values opens a lot of doors
✽   Integration with other HTML5 elements is
    a killer feature
Is it a Flash killer?
Canvas vs. Flash
✽   Canvas will flourish with future
    development of frameworks
✽   Its animation capabilities are only just
    being realised
✽   Flash has tight integration with the offline
    world, but HTML5 is changing that
✽   There is a gap in the market for a GUI for
    developing canvas applications
Thank you!

More Related Content

What's hot

I Can't Believe It's Not Flash
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not Flash
Thomas Fuchs
 
Canvas - HTML 5
Canvas - HTML 5Canvas - HTML 5
Canvas - HTML 5
Jaeni Sahuri
 
Fabric.js @ Falsy Values
Fabric.js @ Falsy ValuesFabric.js @ Falsy Values
Fabric.js @ Falsy Values
Juriy Zaytsev
 
Prototype UI Intro
Prototype UI IntroPrototype UI Intro
Prototype UI Intro
Juriy Zaytsev
 
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tagAdvanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
David Voyles
 
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
Sencha
 
An in-depth look at jQuery
An in-depth look at jQueryAn in-depth look at jQuery
An in-depth look at jQuery
Paul Bakaus
 
How to make a video game
How to make a video gameHow to make a video game
How to make a video game
dandylion13
 
Professional reports with SVG
Professional reports with SVGProfessional reports with SVG
Professional reports with SVG
SpeedPartner GmbH
 
The Canvas Tag
The Canvas TagThe Canvas Tag
The Canvas Tag
Dave Ross
 
Getting Visual with Ruby Processing
Getting Visual with Ruby ProcessingGetting Visual with Ruby Processing
Getting Visual with Ruby Processing
Richard LeBer
 
Mongo db washington dc 2014
Mongo db washington dc 2014Mongo db washington dc 2014
Mongo db washington dc 2014
ikanow
 
5 tips for your HTML5 games
5 tips for your HTML5 games5 tips for your HTML5 games
5 tips for your HTML5 games
Ernesto Jiménez
 
Android 2D Drawing and Animation Framework
Android 2D Drawing and Animation FrameworkAndroid 2D Drawing and Animation Framework
Android 2D Drawing and Animation Framework
Jussi Pohjolainen
 
Android Vector Drawable
 Android Vector Drawable Android Vector Drawable
Android Vector Drawable
Phearum THANN
 
SenchaCon 2016: Developing COSMOS Using Sencha Ext JS 5 - Shenglin Xu
SenchaCon 2016: Developing COSMOS Using Sencha Ext JS 5 - Shenglin XuSenchaCon 2016: Developing COSMOS Using Sencha Ext JS 5 - Shenglin Xu
SenchaCon 2016: Developing COSMOS Using Sencha Ext JS 5 - Shenglin Xu
Sencha
 
Stupid Canvas Tricks
Stupid Canvas TricksStupid Canvas Tricks
Stupid Canvas Tricks
deanhudson
 
Html5 game programming overview
Html5 game programming overviewHtml5 game programming overview
Html5 game programming overview
민태 김
 
用户行为系统Marmot - D2 2011 session
用户行为系统Marmot - D2 2011 session用户行为系统Marmot - D2 2011 session
用户行为系统Marmot - D2 2011 session
RANK LIU
 
Css5 canvas
Css5 canvasCss5 canvas
Css5 canvas
Vadim Spiridenko
 

What's hot (20)

I Can't Believe It's Not Flash
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not Flash
 
Canvas - HTML 5
Canvas - HTML 5Canvas - HTML 5
Canvas - HTML 5
 
Fabric.js @ Falsy Values
Fabric.js @ Falsy ValuesFabric.js @ Falsy Values
Fabric.js @ Falsy Values
 
Prototype UI Intro
Prototype UI IntroPrototype UI Intro
Prototype UI Intro
 
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tagAdvanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
 
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
 
An in-depth look at jQuery
An in-depth look at jQueryAn in-depth look at jQuery
An in-depth look at jQuery
 
How to make a video game
How to make a video gameHow to make a video game
How to make a video game
 
Professional reports with SVG
Professional reports with SVGProfessional reports with SVG
Professional reports with SVG
 
The Canvas Tag
The Canvas TagThe Canvas Tag
The Canvas Tag
 
Getting Visual with Ruby Processing
Getting Visual with Ruby ProcessingGetting Visual with Ruby Processing
Getting Visual with Ruby Processing
 
Mongo db washington dc 2014
Mongo db washington dc 2014Mongo db washington dc 2014
Mongo db washington dc 2014
 
5 tips for your HTML5 games
5 tips for your HTML5 games5 tips for your HTML5 games
5 tips for your HTML5 games
 
Android 2D Drawing and Animation Framework
Android 2D Drawing and Animation FrameworkAndroid 2D Drawing and Animation Framework
Android 2D Drawing and Animation Framework
 
Android Vector Drawable
 Android Vector Drawable Android Vector Drawable
Android Vector Drawable
 
SenchaCon 2016: Developing COSMOS Using Sencha Ext JS 5 - Shenglin Xu
SenchaCon 2016: Developing COSMOS Using Sencha Ext JS 5 - Shenglin XuSenchaCon 2016: Developing COSMOS Using Sencha Ext JS 5 - Shenglin Xu
SenchaCon 2016: Developing COSMOS Using Sencha Ext JS 5 - Shenglin Xu
 
Stupid Canvas Tricks
Stupid Canvas TricksStupid Canvas Tricks
Stupid Canvas Tricks
 
Html5 game programming overview
Html5 game programming overviewHtml5 game programming overview
Html5 game programming overview
 
用户行为系统Marmot - D2 2011 session
用户行为系统Marmot - D2 2011 session用户行为系统Marmot - D2 2011 session
用户行为系统Marmot - D2 2011 session
 
Css5 canvas
Css5 canvasCss5 canvas
Css5 canvas
 

Similar to HTML5 Canvas - The Future of Graphics on the Web

Html5 Canvas Drawing and Animation
Html5 Canvas Drawing and AnimationHtml5 Canvas Drawing and Animation
Html5 Canvas Drawing and Animation
Mindfire Solutions
 
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generationSVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generation
Anthony Starks
 
Interactive Graphics
Interactive GraphicsInteractive Graphics
Interactive Graphics
Blazing Cloud
 
Writing a Space Shooter with HTML5 Canvas
Writing a Space Shooter with HTML5 CanvasWriting a Space Shooter with HTML5 Canvas
Writing a Space Shooter with HTML5 Canvas
Steve Purkis
 
Iagc2
Iagc2Iagc2
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billyRotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
nimbleltd
 
SVG vs Canvas - Showdown of the Painters
SVG vs Canvas - Showdown of the PaintersSVG vs Canvas - Showdown of the Painters
SVG vs Canvas - Showdown of the Painters
Phil Reither
 
canvas_1.pptx
canvas_1.pptxcanvas_1.pptx
canvas_1.pptx
RutujRunwal1
 
Yavorsky
YavorskyYavorsky
Exploring Canvas
Exploring CanvasExploring Canvas
Exploring Canvas
Kevin Hoyt
 
Javascript Canvas API
Javascript Canvas APIJavascript Canvas API
Javascript Canvas API
Samuel Santos
 
SVGo workshop
SVGo workshopSVGo workshop
SVGo workshop
Anthony Starks
 
Html5
Html5Html5
HTML5 Canvas - Basics.pptx
HTML5 Canvas - Basics.pptxHTML5 Canvas - Basics.pptx
HTML5 Canvas - Basics.pptx
AhmadAbba6
 
HTML CANVAS
HTML CANVASHTML CANVAS
HTML CANVAS
Light Salt
 
P5js syracuse dev meetup 20181218
P5js syracuse dev meetup 20181218P5js syracuse dev meetup 20181218
P5js syracuse dev meetup 20181218
👨‍💻 Joshua Marris
 
Intro to Canva
Intro to CanvaIntro to Canva
Intro to Canva
dreambreeze
 
Introduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User GroupIntroduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User Group
bernice-chan
 
Introduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User GroupIntroduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User Group
dreambreeze
 
IE9에서 HTML5 개발하기
IE9에서 HTML5 개발하기IE9에서 HTML5 개발하기
IE9에서 HTML5 개발하기
Reagan Hwang
 

Similar to HTML5 Canvas - The Future of Graphics on the Web (20)

Html5 Canvas Drawing and Animation
Html5 Canvas Drawing and AnimationHtml5 Canvas Drawing and Animation
Html5 Canvas Drawing and Animation
 
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generationSVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generation
 
Interactive Graphics
Interactive GraphicsInteractive Graphics
Interactive Graphics
 
Writing a Space Shooter with HTML5 Canvas
Writing a Space Shooter with HTML5 CanvasWriting a Space Shooter with HTML5 Canvas
Writing a Space Shooter with HTML5 Canvas
 
Iagc2
Iagc2Iagc2
Iagc2
 
Rotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billyRotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
 
SVG vs Canvas - Showdown of the Painters
SVG vs Canvas - Showdown of the PaintersSVG vs Canvas - Showdown of the Painters
SVG vs Canvas - Showdown of the Painters
 
canvas_1.pptx
canvas_1.pptxcanvas_1.pptx
canvas_1.pptx
 
Yavorsky
YavorskyYavorsky
Yavorsky
 
Exploring Canvas
Exploring CanvasExploring Canvas
Exploring Canvas
 
Javascript Canvas API
Javascript Canvas APIJavascript Canvas API
Javascript Canvas API
 
SVGo workshop
SVGo workshopSVGo workshop
SVGo workshop
 
Html5
Html5Html5
Html5
 
HTML5 Canvas - Basics.pptx
HTML5 Canvas - Basics.pptxHTML5 Canvas - Basics.pptx
HTML5 Canvas - Basics.pptx
 
HTML CANVAS
HTML CANVASHTML CANVAS
HTML CANVAS
 
P5js syracuse dev meetup 20181218
P5js syracuse dev meetup 20181218P5js syracuse dev meetup 20181218
P5js syracuse dev meetup 20181218
 
Intro to Canva
Intro to CanvaIntro to Canva
Intro to Canva
 
Introduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User GroupIntroduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User Group
 
Introduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User GroupIntroduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User Group
 
IE9에서 HTML5 개발하기
IE9에서 HTML5 개발하기IE9에서 HTML5 개발하기
IE9에서 HTML5 개발하기
 

More from Robin Hawkes

ViziCities - Lessons Learnt Visualising Real-world Cities in 3D
ViziCities - Lessons Learnt Visualising Real-world Cities in 3DViziCities - Lessons Learnt Visualising Real-world Cities in 3D
ViziCities - Lessons Learnt Visualising Real-world Cities in 3D
Robin Hawkes
 
Understanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisation
Robin Hawkes
 
Calculating building heights using a phone camera
Calculating building heights using a phone cameraCalculating building heights using a phone camera
Calculating building heights using a phone camera
Robin Hawkes
 
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big DataWebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
Robin Hawkes
 
Understanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisation
Robin Hawkes
 
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGLViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
Robin Hawkes
 
Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3
Robin Hawkes
 
ViziCities: Making SimCity for the Real World
ViziCities: Making SimCity for the Real WorldViziCities: Making SimCity for the Real World
ViziCities: Making SimCity for the Real World
Robin Hawkes
 
The State of WebRTC
The State of WebRTCThe State of WebRTC
The State of WebRTC
Robin Hawkes
 
Bringing Cities to Life Using Big Data & WebGL
Bringing Cities to Life Using Big Data & WebGLBringing Cities to Life Using Big Data & WebGL
Bringing Cities to Life Using Big Data & WebGL
Robin Hawkes
 
Mobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & HelpersMobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & Helpers
Robin Hawkes
 
Boot to Gecko – The Web as a Platform
Boot to Gecko – The Web as a PlatformBoot to Gecko – The Web as a Platform
Boot to Gecko – The Web as a Platform
Robin Hawkes
 
Mozilla Firefox: Present and Future - Fluent JS
Mozilla Firefox: Present and Future - Fluent JSMozilla Firefox: Present and Future - Fluent JS
Mozilla Firefox: Present and Future - Fluent JS
Robin Hawkes
 
The State of HTML5 Games - Fluent JS
The State of HTML5 Games - Fluent JSThe State of HTML5 Games - Fluent JS
The State of HTML5 Games - Fluent JS
Robin Hawkes
 
HTML5 Technologies for Game Development - Web Directions Code
HTML5 Technologies for Game Development - Web Directions CodeHTML5 Technologies for Game Development - Web Directions Code
HTML5 Technologies for Game Development - Web Directions Code
Robin Hawkes
 
MelbJS - Inside Rawkets
MelbJS - Inside RawketsMelbJS - Inside Rawkets
MelbJS - Inside Rawkets
Robin Hawkes
 
Melbourne Geek Night - Boot to Gecko – The Web as a Platform
Melbourne Geek Night - Boot to Gecko – The Web as a PlatformMelbourne Geek Night - Boot to Gecko – The Web as a Platform
Melbourne Geek Night - Boot to Gecko – The Web as a Platform
Robin Hawkes
 
Hacking with B2G – Web Apps and Customisation
Hacking with B2G – Web Apps and CustomisationHacking with B2G – Web Apps and Customisation
Hacking with B2G – Web Apps and Customisation
Robin Hawkes
 
MDN Hackday London - Open Web Games with HTML5 & JavaScript
MDN Hackday London - Open Web Games with HTML5 & JavaScriptMDN Hackday London - Open Web Games with HTML5 & JavaScript
MDN Hackday London - Open Web Games with HTML5 & JavaScript
Robin Hawkes
 
MDN Hackday London - Boot to Gecko: The Future of Mobile
MDN Hackday London - Boot to Gecko: The Future of MobileMDN Hackday London - Boot to Gecko: The Future of Mobile
MDN Hackday London - Boot to Gecko: The Future of Mobile
Robin Hawkes
 

More from Robin Hawkes (20)

ViziCities - Lessons Learnt Visualising Real-world Cities in 3D
ViziCities - Lessons Learnt Visualising Real-world Cities in 3DViziCities - Lessons Learnt Visualising Real-world Cities in 3D
ViziCities - Lessons Learnt Visualising Real-world Cities in 3D
 
Understanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisation
 
Calculating building heights using a phone camera
Calculating building heights using a phone cameraCalculating building heights using a phone camera
Calculating building heights using a phone camera
 
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big DataWebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
 
Understanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisation
 
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGLViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
 
Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3
 
ViziCities: Making SimCity for the Real World
ViziCities: Making SimCity for the Real WorldViziCities: Making SimCity for the Real World
ViziCities: Making SimCity for the Real World
 
The State of WebRTC
The State of WebRTCThe State of WebRTC
The State of WebRTC
 
Bringing Cities to Life Using Big Data & WebGL
Bringing Cities to Life Using Big Data & WebGLBringing Cities to Life Using Big Data & WebGL
Bringing Cities to Life Using Big Data & WebGL
 
Mobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & HelpersMobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & Helpers
 
Boot to Gecko – The Web as a Platform
Boot to Gecko – The Web as a PlatformBoot to Gecko – The Web as a Platform
Boot to Gecko – The Web as a Platform
 
Mozilla Firefox: Present and Future - Fluent JS
Mozilla Firefox: Present and Future - Fluent JSMozilla Firefox: Present and Future - Fluent JS
Mozilla Firefox: Present and Future - Fluent JS
 
The State of HTML5 Games - Fluent JS
The State of HTML5 Games - Fluent JSThe State of HTML5 Games - Fluent JS
The State of HTML5 Games - Fluent JS
 
HTML5 Technologies for Game Development - Web Directions Code
HTML5 Technologies for Game Development - Web Directions CodeHTML5 Technologies for Game Development - Web Directions Code
HTML5 Technologies for Game Development - Web Directions Code
 
MelbJS - Inside Rawkets
MelbJS - Inside RawketsMelbJS - Inside Rawkets
MelbJS - Inside Rawkets
 
Melbourne Geek Night - Boot to Gecko – The Web as a Platform
Melbourne Geek Night - Boot to Gecko – The Web as a PlatformMelbourne Geek Night - Boot to Gecko – The Web as a Platform
Melbourne Geek Night - Boot to Gecko – The Web as a Platform
 
Hacking with B2G – Web Apps and Customisation
Hacking with B2G – Web Apps and CustomisationHacking with B2G – Web Apps and Customisation
Hacking with B2G – Web Apps and Customisation
 
MDN Hackday London - Open Web Games with HTML5 & JavaScript
MDN Hackday London - Open Web Games with HTML5 & JavaScriptMDN Hackday London - Open Web Games with HTML5 & JavaScript
MDN Hackday London - Open Web Games with HTML5 & JavaScript
 
MDN Hackday London - Boot to Gecko: The Future of Mobile
MDN Hackday London - Boot to Gecko: The Future of MobileMDN Hackday London - Boot to Gecko: The Future of Mobile
MDN Hackday London - Boot to Gecko: The Future of Mobile
 

Recently uploaded

Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
Fwdays
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
BibashShahi
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
Fwdays
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
ScyllaDB
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
What is an RPA CoE? Session 2 – CoE Roles
What is an RPA CoE?  Session 2 – CoE RolesWhat is an RPA CoE?  Session 2 – CoE Roles
What is an RPA CoE? Session 2 – CoE Roles
DianaGray10
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
Fwdays
 
High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024
Vadym Kazulkin
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
Fwdays
 
ScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking ReplicationScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking Replication
ScyllaDB
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
UiPathCommunity
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
zjhamm304
 

Recently uploaded (20)

Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
What is an RPA CoE? Session 2 – CoE Roles
What is an RPA CoE?  Session 2 – CoE RolesWhat is an RPA CoE?  Session 2 – CoE Roles
What is an RPA CoE? Session 2 – CoE Roles
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
 
High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
 
ScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking ReplicationScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking Replication
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
 

HTML5 Canvas - The Future of Graphics on the Web

  • 1. HTML5 Canvas The Future of Graphics on the Web
  • 2. Rob Hawkes @robhawkes for you social media folk rawkes.com if you want to see more The  place  to  be Yes,  that’s  me looking  horrible AKA.  Layabout Guess  my middle  name
  • 3. “Canvas is my favourite part of HTML5, alongside its video and audio support” Myself, at some point
  • 4. So what is canvas?
  • 5. An overview of canvas ✽ 2D drawing platform within the browser ✽ Uses nothing more than JavaScript and HTML – no plugins ✽ Extensible through a JavaScript API ✽ Created by Apple for dashboard widgets ✽ Now openly developed as a W3C spec
  • 6. Bitmap vs. vector ✽ Canvas is a bitmap system • Everything is drawn as a single, flat, picture • Changes require the whole picture to be redrawn ✽ SVG is a vector system • Elements to be drawn are separate DOM objects • They can be manipulated individually ✽ SVG isn’t part of HTML5 • Future isn’t as rosy as canvas’
  • 7. Browser support ✽ Most modern browsers • Safari • Chrome • Firefox • Opera ✽ No Internet Explorer support by default • However, there are hacks to get it working
  • 8. What is it for?
  • 12. Games
  • 13. Here’s something I made earlier
  • 15. Created using the new HTML5 tag <canvas height=”600” width=”800”></canvas> Height  and  width  need  to  be  set  explicitly
  • 16. (0,0) x y Uses the standard screen-based coordinate system
  • 17. Everything is drawn onto the 2D rendering context (ctx) 2D rendering context Canvas
  • 18. Use getContext() to access the 2D rendering context var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); This  is  your  friend
  • 19. ctx.fillStyle = 'rgb(255, 0, 0)'; ctx.strokeStyle = 'rgba(0, 255, 0, 0.5)'; Use  RGBA  for  alpha transparency fillStyle() and strokeStyle() define the style of shapes to be drawn
  • 20. Simple shapes Method Action fillRect(x, y, w, h) Draws a rectangle using the current fill style strokeRect(x, y, w, h) Draws the outline of a rectangle using the current stroke style clearRect(x, y, w, h) Clears all pixels within the given rectangle Simple shapes are drawn without effecting the current path
  • 21. ctx.fillStyle = ‘rgb(65, 60, 50)’; ctx.fillRect(25, 50, 100, 100); ctx.strokeStyle = ‘rgb(65, 60, 50)’; ctx.strokeRect(130, 500, 40, 70); 500 130
  • 22. Complex shapes & paths ✽ Paths are a list of subpaths ✽ Subpaths are one or more points connected by straight or curved lines ✽ Rendering context always has a current path ✽ A new path should be created for each individual shape
  • 23. Complex shapes & paths Method Action beginPath() Resets the current path closePath() Closes the current subpath and starts a new one moveTo(x, y) Creates a new subpath at the given point fill() Fills the subpaths with the current fill style stroke() Outlines the subpaths with the current stroke style
  • 24. Complex shapes & paths Method Action lineTo(x, y) Draws a straight line from the previous point rect(x, y, w, h) Adds a new closed rectangular subpath arc(x, y, radius, startAngle, Adds a subpath along the circumference of endAngle, anticlockwise) the described circle, within the angles defines arcTo(x1, y1, x2, y2, radius) Adds a subpath connecting two points by an arc of the defined radius bezierCurveTo(cp1x, cp1y, Adds a cubic Bézier curve with the given cp2x, cp2y, x, y) control points quadraticCurveTo(cpx, Adds a quadratic Bézier curve with the given cpy, x, y) control points
  • 25. ctx.strokeStyle = ‘rgb(65, 60, 50)’; ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(100, 100); ctx.stroke(); 50 50 100 100
  • 26. ctx.fillStyle = ‘rgb(65, 60, 50)’; ctx.beginPath(); ctx.arc(100, 100, 30, 0, Math.PI*2, true); ctx.fill(); 100 100 30
  • 27. ctx.strokeStyle = ‘rgb(65, 60, 50)’; ctx.beginPath(); ctx.moveTo(50, 100); ctx.bezierCurveTo(70, 50, 130, 150, 150, 100); ctx.stroke(); cp1 100 50 cp2
  • 28. Other cool stuff ✽ Text ✽ Shadows & blurring ✽ Line styles; width, cap, etc. ✽ Saving state of drawing context ✽ Transformations
  • 30. Images can be drawn onto the canvas ctx.drawImage(image, dx, dy); ctx.drawImage(image, dx, dy, dw, dh); ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh); sy sx sh dy sw dx Canvas dh dw Source image
  • 31. Individual pixel values can be retrieved ctx.getImageData(sx, sy, sw, sh); sy sx Returns an array sh of pixel values sw
  • 34. Harnessing the power ✽ Remember all the shapes on the canvas ✽ Move them, transform them, and make them interact ✽ Redraw the all the shapes in their new positions ✽ Rinse and repeat, really quickly
  • 35. My workflow ✽ Treat each shape as a JavaScript object ✽ Each shape object has position values ✽ Store the shape objects in an array ✽ Run a timeout function every 40 ms ✽ Clear the canvas ✽ Make any changes to the shape objects ✽ Loop through and redraw every shape
  • 36. The future of canvas
  • 37. The future of canvas ✽ OOP programming allows much to be achieved through canvas ✽ It’s flexible and powerful • Animation engines • Pseudo 3D graphics ✽ Reading pixel values opens a lot of doors ✽ Integration with other HTML5 elements is a killer feature
  • 38. Is it a Flash killer?
  • 39. Canvas vs. Flash ✽ Canvas will flourish with future development of frameworks ✽ Its animation capabilities are only just being realised ✽ Flash has tight integration with the offline world, but HTML5 is changing that ✽ There is a gap in the market for a GUI for developing canvas applications