HTML5 Canvas - The Future of Graphics on the Web

Robin Hawkes
Robin HawkesDigital Tinkerer at Rawkes
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!
1 of 40

Recommended

HTML5 Canvas by
HTML5 CanvasHTML5 Canvas
HTML5 CanvasRobyn Overstreet
6.2K views53 slides
Introduction to HTML5 Canvas by
Introduction to HTML5 CanvasIntroduction to HTML5 Canvas
Introduction to HTML5 CanvasMindy McAdams
8.5K views37 slides
Html5 canvas by
Html5 canvasHtml5 canvas
Html5 canvasGary Yeh
586 views39 slides
HTML 5 Canvas & SVG by
HTML 5 Canvas & SVGHTML 5 Canvas & SVG
HTML 5 Canvas & SVGOfir's Fridman
1.3K views22 slides
Intro to HTML5 Canvas by
Intro to HTML5 CanvasIntro to HTML5 Canvas
Intro to HTML5 CanvasJuho Vepsäläinen
2K views32 slides
Drawing with the HTML5 Canvas by
Drawing with the HTML5 CanvasDrawing with the HTML5 Canvas
Drawing with the HTML5 CanvasHenry Osborne
636 views21 slides

More Related Content

What's hot

I Can't Believe It's Not Flash by
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not FlashThomas Fuchs
25K views48 slides
Canvas - HTML 5 by
Canvas - HTML 5Canvas - HTML 5
Canvas - HTML 5Jaeni Sahuri
1.4K views11 slides
Fabric.js @ Falsy Values by
Fabric.js @ Falsy ValuesFabric.js @ Falsy Values
Fabric.js @ Falsy ValuesJuriy Zaytsev
13.3K views42 slides
Prototype UI Intro by
Prototype UI IntroPrototype UI Intro
Prototype UI IntroJuriy Zaytsev
785 views24 slides
Advanced html5 diving into the canvas tag by
Advanced html5 diving into the canvas tagAdvanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tagDavid Voyles
1.1K views52 slides
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package... by
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
1K views33 slides

What's hot(20)

I Can't Believe It's Not Flash by Thomas Fuchs
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not Flash
Thomas Fuchs25K views
Fabric.js @ Falsy Values by Juriy Zaytsev
Fabric.js @ Falsy ValuesFabric.js @ Falsy Values
Fabric.js @ Falsy Values
Juriy Zaytsev13.3K views
Advanced html5 diving into the canvas tag by David Voyles
Advanced html5 diving into the canvas tagAdvanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
David Voyles1.1K views
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package... by Sencha
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...
Sencha1K views
An in-depth look at jQuery by Paul Bakaus
An in-depth look at jQueryAn in-depth look at jQuery
An in-depth look at jQuery
Paul Bakaus1.4K views
How to make a video game by dandylion13
How to make a video gameHow to make a video game
How to make a video game
dandylion13825 views
The Canvas Tag by Dave Ross
The Canvas TagThe Canvas Tag
The Canvas Tag
Dave Ross1.8K views
Getting Visual with Ruby Processing by Richard LeBer
Getting Visual with Ruby ProcessingGetting Visual with Ruby Processing
Getting Visual with Ruby Processing
Richard LeBer6.7K views
Mongo db washington dc 2014 by ikanow
Mongo db washington dc 2014Mongo db washington dc 2014
Mongo db washington dc 2014
ikanow1.9K views
Android 2D Drawing and Animation Framework by Jussi Pohjolainen
Android 2D Drawing and Animation FrameworkAndroid 2D Drawing and Animation Framework
Android 2D Drawing and Animation Framework
Jussi Pohjolainen9.3K views
Android Vector Drawable by Phearum THANN
 Android Vector Drawable Android Vector Drawable
Android Vector Drawable
Phearum THANN1.8K views
SenchaCon 2016: Developing COSMOS Using Sencha Ext JS 5 - Shenglin Xu by Sencha
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
Sencha358 views
Stupid Canvas Tricks by deanhudson
Stupid Canvas TricksStupid Canvas Tricks
Stupid Canvas Tricks
deanhudson9.5K views
Html5 game programming overview by 민태 김
Html5 game programming overviewHtml5 game programming overview
Html5 game programming overview
민태 김1.9K views
用户行为系统Marmot - D2 2011 session by RANK LIU
用户行为系统Marmot - D2 2011 session用户行为系统Marmot - D2 2011 session
用户行为系统Marmot - D2 2011 session
RANK LIU1.1K views

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

Html5 Canvas Drawing and Animation by
Html5 Canvas Drawing and AnimationHtml5 Canvas Drawing and Animation
Html5 Canvas Drawing and AnimationMindfire Solutions
2.3K views42 slides
SVGo: a Go Library for SVG generation by
SVGo: a Go Library for SVG generationSVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generationAnthony Starks
1.6K views46 slides
Interactive Graphics by
Interactive GraphicsInteractive Graphics
Interactive GraphicsBlazing Cloud
498 views24 slides
Writing a Space Shooter with HTML5 Canvas by
Writing a Space Shooter with HTML5 CanvasWriting a Space Shooter with HTML5 Canvas
Writing a Space Shooter with HTML5 CanvasSteve Purkis
1.9K views65 slides
Iagc2 by
Iagc2Iagc2
Iagc2Lee Lundrigan
677 views24 slides
Rotoscope inthebrowserppt billy by
Rotoscope inthebrowserppt billyRotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billynimbleltd
554 views26 slides

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

SVGo: a Go Library for SVG generation by Anthony Starks
SVGo: a Go Library for SVG generationSVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generation
Anthony Starks1.6K views
Writing a Space Shooter with HTML5 Canvas by Steve Purkis
Writing a Space Shooter with HTML5 CanvasWriting a Space Shooter with HTML5 Canvas
Writing a Space Shooter with HTML5 Canvas
Steve Purkis1.9K views
Rotoscope inthebrowserppt billy by nimbleltd
Rotoscope inthebrowserppt billyRotoscope inthebrowserppt billy
Rotoscope inthebrowserppt billy
nimbleltd554 views
SVG vs Canvas - Showdown of the Painters by Phil Reither
SVG vs Canvas - Showdown of the PaintersSVG vs Canvas - Showdown of the Painters
SVG vs Canvas - Showdown of the Painters
Phil Reither1.4K views
Exploring Canvas by Kevin Hoyt
Exploring CanvasExploring Canvas
Exploring Canvas
Kevin Hoyt753 views
HTML5 Canvas - Basics.pptx by AhmadAbba6
HTML5 Canvas - Basics.pptxHTML5 Canvas - Basics.pptx
HTML5 Canvas - Basics.pptx
AhmadAbba644 views
Intro to Canva by dreambreeze
Intro to CanvaIntro to Canva
Intro to Canva
dreambreeze1.1K views
Introduction to Canvas - Toronto HTML5 User Group by bernice-chan
Introduction to Canvas - Toronto HTML5 User GroupIntroduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User Group
bernice-chan2.1K views
Introduction to Canvas - Toronto HTML5 User Group by dreambreeze
Introduction to Canvas - Toronto HTML5 User GroupIntroduction to Canvas - Toronto HTML5 User Group
Introduction to Canvas - Toronto HTML5 User Group
dreambreeze396 views
IE9에서 HTML5 개발하기 by Reagan Hwang
IE9에서 HTML5 개발하기IE9에서 HTML5 개발하기
IE9에서 HTML5 개발하기
Reagan Hwang642 views

More from Robin Hawkes

ViziCities - Lessons Learnt Visualising Real-world Cities in 3D by
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 3DRobin Hawkes
1.5K views34 slides
Understanding cities using ViziCities and 3D data visualisation by
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationRobin Hawkes
1.3K views26 slides
Calculating building heights using a phone camera by
Calculating building heights using a phone cameraCalculating building heights using a phone camera
Calculating building heights using a phone cameraRobin Hawkes
1.8K views26 slides
WebVisions – ViziCities: Bringing Cities to Life Using Big Data by
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 DataRobin Hawkes
1.6K views79 slides
Understanding cities using ViziCities and 3D data visualisation by
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationRobin Hawkes
1.8K views49 slides
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL by
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 WebGLRobin Hawkes
5.6K views104 slides

More from Robin Hawkes(20)

ViziCities - Lessons Learnt Visualising Real-world Cities in 3D by Robin Hawkes
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 Hawkes1.5K views
Understanding cities using ViziCities and 3D data visualisation by Robin Hawkes
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisation
Robin Hawkes1.3K views
Calculating building heights using a phone camera by Robin Hawkes
Calculating building heights using a phone cameraCalculating building heights using a phone camera
Calculating building heights using a phone camera
Robin Hawkes1.8K views
WebVisions – ViziCities: Bringing Cities to Life Using Big Data by Robin Hawkes
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 Hawkes1.6K views
Understanding cities using ViziCities and 3D data visualisation by Robin Hawkes
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisation
Robin Hawkes1.8K views
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL by Robin Hawkes
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 Hawkes5.6K views
Beautiful Data Visualisation & D3 by Robin Hawkes
Beautiful Data Visualisation & D3Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3
Robin Hawkes2.9K views
ViziCities: Making SimCity for the Real World by Robin Hawkes
ViziCities: Making SimCity for the Real WorldViziCities: Making SimCity for the Real World
ViziCities: Making SimCity for the Real World
Robin Hawkes2.2K views
The State of WebRTC by Robin Hawkes
The State of WebRTCThe State of WebRTC
The State of WebRTC
Robin Hawkes13.6K views
Bringing Cities to Life Using Big Data & WebGL by Robin Hawkes
Bringing Cities to Life Using Big Data & WebGLBringing Cities to Life Using Big Data & WebGL
Bringing Cities to Life Using Big Data & WebGL
Robin Hawkes6.5K views
Mobile App Development - Pitfalls & Helpers by Robin Hawkes
Mobile App Development - Pitfalls & HelpersMobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & Helpers
Robin Hawkes2K views
Boot to Gecko – The Web as a Platform by Robin Hawkes
Boot to Gecko – The Web as a PlatformBoot to Gecko – The Web as a Platform
Boot to Gecko – The Web as a Platform
Robin Hawkes4.3K views
Mozilla Firefox: Present and Future - Fluent JS by Robin Hawkes
Mozilla Firefox: Present and Future - Fluent JSMozilla Firefox: Present and Future - Fluent JS
Mozilla Firefox: Present and Future - Fluent JS
Robin Hawkes2.6K views
The State of HTML5 Games - Fluent JS by Robin Hawkes
The State of HTML5 Games - Fluent JSThe State of HTML5 Games - Fluent JS
The State of HTML5 Games - Fluent JS
Robin Hawkes7.6K views
HTML5 Technologies for Game Development - Web Directions Code by Robin Hawkes
HTML5 Technologies for Game Development - Web Directions CodeHTML5 Technologies for Game Development - Web Directions Code
HTML5 Technologies for Game Development - Web Directions Code
Robin Hawkes10K views
MelbJS - Inside Rawkets by Robin Hawkes
MelbJS - Inside RawketsMelbJS - Inside Rawkets
MelbJS - Inside Rawkets
Robin Hawkes1.3K views
Melbourne Geek Night - Boot to Gecko – The Web as a Platform by Robin Hawkes
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 Hawkes3.6K views
Hacking with B2G – Web Apps and Customisation by Robin Hawkes
Hacking with B2G – Web Apps and CustomisationHacking with B2G – Web Apps and Customisation
Hacking with B2G – Web Apps and Customisation
Robin Hawkes1.3K views
MDN Hackday London - Open Web Games with HTML5 & JavaScript by Robin Hawkes
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 Hawkes3.5K views
MDN Hackday London - Boot to Gecko: The Future of Mobile by Robin Hawkes
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 Hawkes3.5K views

Recently uploaded

Voice Logger - Telephony Integration Solution at Aegis by
Voice Logger - Telephony Integration Solution at AegisVoice Logger - Telephony Integration Solution at Aegis
Voice Logger - Telephony Integration Solution at AegisNirmal Sharma
39 views1 slide
Five Things You SHOULD Know About Postman by
Five Things You SHOULD Know About PostmanFive Things You SHOULD Know About Postman
Five Things You SHOULD Know About PostmanPostman
33 views43 slides
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive by
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveNetwork Automation Forum
31 views35 slides
Case Study Copenhagen Energy and Business Central.pdf by
Case Study Copenhagen Energy and Business Central.pdfCase Study Copenhagen Energy and Business Central.pdf
Case Study Copenhagen Energy and Business Central.pdfAitana
16 views3 slides
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensors by
TouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective SensorsTouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective Sensors
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensorssugiuralab
19 views15 slides
Democratising digital commerce in India-Report by
Democratising digital commerce in India-ReportDemocratising digital commerce in India-Report
Democratising digital commerce in India-ReportKapil Khandelwal (KK)
15 views161 slides

Recently uploaded(20)

Voice Logger - Telephony Integration Solution at Aegis by Nirmal Sharma
Voice Logger - Telephony Integration Solution at AegisVoice Logger - Telephony Integration Solution at Aegis
Voice Logger - Telephony Integration Solution at Aegis
Nirmal Sharma39 views
Five Things You SHOULD Know About Postman by Postman
Five Things You SHOULD Know About PostmanFive Things You SHOULD Know About Postman
Five Things You SHOULD Know About Postman
Postman33 views
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive by Network Automation Forum
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Case Study Copenhagen Energy and Business Central.pdf by Aitana
Case Study Copenhagen Energy and Business Central.pdfCase Study Copenhagen Energy and Business Central.pdf
Case Study Copenhagen Energy and Business Central.pdf
Aitana16 views
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensors by sugiuralab
TouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective SensorsTouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective Sensors
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensors
sugiuralab19 views
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas... by Bernd Ruecker
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
Bernd Ruecker37 views
Attacking IoT Devices from a Web Perspective - Linux Day by Simone Onofri
Attacking IoT Devices from a Web Perspective - Linux Day Attacking IoT Devices from a Web Perspective - Linux Day
Attacking IoT Devices from a Web Perspective - Linux Day
Simone Onofri16 views
Special_edition_innovator_2023.pdf by WillDavies22
Special_edition_innovator_2023.pdfSpecial_edition_innovator_2023.pdf
Special_edition_innovator_2023.pdf
WillDavies2217 views
Data Integrity for Banking and Financial Services by Precisely
Data Integrity for Banking and Financial ServicesData Integrity for Banking and Financial Services
Data Integrity for Banking and Financial Services
Precisely21 views
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N... by James Anderson
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
James Anderson85 views
handbook for web 3 adoption.pdf by Liveplex
handbook for web 3 adoption.pdfhandbook for web 3 adoption.pdf
handbook for web 3 adoption.pdf
Liveplex22 views

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