Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Canvas and Web Vector
                       Graphics
       Dylan Schiemann (@dylans)
       SitePen, Inc.
       HTML5 C...
In the beginning, there was ASCII art
                   <img />
                   Microsoft and VML
                   A...
1996




    Topology and Rheology of Quasi Two-Dimensional Foam
        http://arxiv.org/pdf/cond-mat/9904101


        ©...
Raster vs. Vector

                   Raster: Rectangular grid of pixels
                          Pre-rendered before run...
Native vs. Plug-in

                   Open Protocols
                          No proprietary player or studio required
 ...
SVG vs. Canvas
                                                                SVG                     Canvas
            ...
2D vs. 3D

                   2D
                          SVG, Canvas, etc.
                   3D
                       ...
CSS 3 Extensions

                   Bringing the most important parts of SVG to HTML+CSS!
                          Gradi...
Toolkits

                   Low-level (shapes, lines, events, etc.):
                          DojoX GFX (SVG, VML, Canva...
Toolkits

                   Low-level (shapes, lines, events, etc.):
                          Dojo GFX, MooTools ART, Pr...
Let's Draw Something




    © SitePen, Inc. All Rights Reserved
Saturday, October 16, 2010
Canvas Code - Basic Structure

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <title>...
Canvas Example: London Ajax Logo

                <script>
                     // Set up a few variables, including our c...
Canvas Example: London Ajax Logo (cont)

                           // ... code continued from previous slide ...

       ...
SVG Code - Basic Structure

          <?xml version="1.0" standalone="no"?>
          <!DOCTYPE svg PUBLIC "-//W3C//DTD SV...
SVG Example: London Ajax Logo

          <?xml version="1.0" standalone="no"?>
          <!DOCTYPE svg PUBLIC "-//W3C//DTD...
SVG Example: London Ajax Logo (cont.)

              <!-- polyline to create the upside down "V" shape -->
              <...
Two Ways to Include SVG

                   <object>
                   <iframe>




    © SitePen, Inc. All Rights Reserv...
GFX Example: London Ajax Logo

          <!-- node which will contain the drawing -->

          <script>
              //...
GFX Example: London Ajax Logo (cont)

                  // Create an upside-down "V"
                  surface.createPolyl...
Example

                   Fun with the London Ajax logo




    © SitePen, Inc. All Rights Reserved
Saturday, October 16...
Canvas Compatibility

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <title>Canvas Ex...
© SitePen, Inc. All Rights Reserved

Saturday, October 16, 2010
Upcoming SlideShare
Loading in …5
×

Introduction to Canvas and Native Web Vector Graphics

3,328 views

Published on

Vector graphics presentation at HTML5 Code Camp in Norway! October 16, 2010

Published in: Technology, Art & Photos
  • Be the first to comment

Introduction to Canvas and Native Web Vector Graphics

  1. 1. Canvas and Web Vector Graphics Dylan Schiemann (@dylans) SitePen, Inc. HTML5 Code Camp, October, 2010 © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010
  2. 2. In the beginning, there was ASCII art <img /> Microsoft and VML Adobe, the W3C and SVG Firefox and Opera get native SVG Firefox, Opera and Safari get canvas All non-IE browsers get canvas and SVG IE9: 2011 © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010
  3. 3. 1996 Topology and Rheology of Quasi Two-Dimensional Foam http://arxiv.org/pdf/cond-mat/9904101 © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010
  4. 4. Raster vs. Vector Raster: Rectangular grid of pixels Pre-rendered before runtime (JPG, PNG) Rendered at runtime (Canvas) Vector: Mathematical representation of a shape Rendered at runtime (SVG) © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010
  5. 5. Native vs. Plug-in Open Protocols No proprietary player or studio required Use seamlessly with HTML, CSS, DOM No install needed A modular piece of the web rather than trying to replace it © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010
  6. 6. SVG vs. Canvas SVG Canvas Representation Pixels DOM Nodes Scalability Vector Raster Syntax/Size Verbose Terse Event Handling DOM Events Pixel Coords Browser Support IE9 beta, all majors IE9?, all majors Mobile Support Many More Animations JavaScript/SMIL Timers Accessibility Yes No Image Save No Yes (PNG or JPG) http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/ © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010
  7. 7. 2D vs. 3D 2D SVG, Canvas, etc. 3D WebGL (FF, Chrome, Safari dev builds) replaces O3D, Canvas 3D SVG 3D Transforms © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010
  8. 8. CSS 3 Extensions Bringing the most important parts of SVG to HTML+CSS! Gradients Transforms (2D and 3D) Transitions Animations Masks Blurring the lines Canvas as a background image HTML elements inside SVG elements © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010
  9. 9. Toolkits Low-level (shapes, lines, events, etc.): DojoX GFX (SVG, VML, Canvas, Silverlight, SVGWeb) MooTools ART (SVG, VML) Processing (Canvas) Raphaël (SVG, VML) High-level DojoX Charting, Drawing MooTools ART Widgets PlotKit and many other charting projects © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010
  10. 10. Toolkits Low-level (shapes, lines, events, etc.): Dojo GFX, MooTools ART, Processing, Raphaël High-level DojoX Charting, Drawing MooTools ART Widgets PlotKit and many other charting projects © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010
  11. 11. Let's Draw Something © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010
  12. 12. Canvas Code - Basic Structure <!DOCTYPE html> <html lang="en"> <head> <title>Canvas Example</title> </head> <body> <!-- canvas element; container --> <canvas id="myCanvas" width="320" height="320"> Your browser does not have support for Canvas. </canvas> </body> </html> © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010
  13. 13. Canvas Example: London Ajax Logo <script> // Set up a few variables, including our canvas and context var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), grad; // Build the path for the V ctx.beginPath(); ctx.moveTo(7, 105); ctx.lineTo(25, 105); ctx.lineTo(60, 31); ctx.lineTo(96, 105); ctx.lineTo(114, 105); ctx.lineTo(69, 11); ctx.lineTo(52, 11); ctx.closePath(); // Set up the stroke ctx.strokeStyle = '#a70017'; ctx.stroke(); // Set up the gradient grad = ctx.createLinearGradient(0, 0, 0, 105); grad.addColorStop(0, '#f3001f'); grad.addColorStop(1, '#a40016'); © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010
  14. 14. Canvas Example: London Ajax Logo (cont) // ... code continued from previous slide ... // Apply the gradient to the V ctx.fillStyle = grad; ctx.fill(); // Create the blue box ctx.fillStyle = '#0000ae'; ctx.fillRect(8, 68, 103, 16); // Create the text ctx.font = 'bold 9pt Arial'; ctx.fillStyle = '#ffffff'; ctx.fillText('LONDON AJAX', 16, 80); ctx.strokeStyle = '#ffffff'; ctx.strokeText('LONDON AJAX', 16, 80); </script> © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010
  15. 15. SVG Code - Basic Structure <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/ DTD/svg11.dtd"> <!-- containing node --> <svg width=​"480" height=​"480">​ <!-- defs: contains "referenced" elements --> <defs>​ </defs>​ <!-- add all shapes here --> </svg> © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010 I think of “defs” as almost an array of vars, indexed by an ID attribute
  16. 16. SVG Example: London Ajax Logo <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/ DTD/svg11.dtd"> <!-- container --> <svg width="480" height="480" xmlns="http://www.w3.org/2000/svg" version="1.1">​ <!-- definitions --> <defs>​ <!-- linear gradient for the "A" --> <!-- referenced as "Gradient1" --> <linearGradient id="Gradient1" gradientUnits="userSpaceOnUse" x1="0.00000000" y1="0.00000000" x2="0.00000000" y2="420.00000000">​ <stop offset="0.00000000" stop-color="rgb(243, 0, 31)" stop-opacity="1">​</ stop>​ <stop offset="1.00000000" stop-color="rgb(164, 0, 22)" stop-opacity="1">​</ stop>​ </linearGradient>​ </defs>​ <!-- shapes on next slide --> © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010
  17. 17. SVG Example: London Ajax Logo (cont.) <!-- polyline to create the upside down "V" shape --> <!-- uses gradation fill --> <polyline fill="url(#Gradient1)" style="fill:url(#Gradient1);" stroke="rgb(167, 0, 23)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke- linejoin="miter" stroke-miterlimit="4" points="28 420 100 420 240 124 384 420 456 420 276 44 208 44 28 420" stroke-dasharray="none" fill-rule="evenodd" /> <!-- blue rect shape to complete the "A" --> <rect fill="rgb(0, 0, 174)" fill-opacity="1" stroke="none" stroke-opacity="0" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke- miterlimit="4" x="32" y="272" width="412" height="64" fill-rule="evenodd" />​ <!-- text for "LONDON AJAX" --> <text fill="rgb(255, 255, 255)" fill-opacity="1" stroke="none" stroke- opacity="0" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke- miterlimit="4" x="64" y="320" text-anchor="start" text-decoration="none" rotate="0" kerning="auto" text-rendering="optimizeLegibility" font-style="normal" font- variant="normal" font-weight="bold" font-size="36pt" font-family="Arial" fill- rule="evenodd">​LONDON AJAX​</text>​ </svg> © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010 https://user.sitepen.com/~dwalsh/ajax-london.svg
  18. 18. Two Ways to Include SVG <object> <iframe> © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010
  19. 19. GFX Example: London Ajax Logo <!-- node which will contain the drawing --> <script> // Require gfx dojo.require('dojox.gfx'); dojo.require('dojox.gfx.gradient'); // When the resources have loaded.... dojo.ready(function() { // Grab the DIV that will contain the drawing var refNode = dojo.byId('someNode'); // Create the GFX "surface" var surface = new dojox.gfx.createSurface(refNode,120,120); © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010
  20. 20. GFX Example: London Ajax Logo (cont) // Create an upside-down "V" surface.createPolyline([ { x:7, y:105 }, { x:25, y:105 }, { x:60, y:31 }, { x:96, y:105 }, { x:114, y:105 }, { x:69, y:11 }, { x:52, y:11 }, { x:7, y:105 } ]). setStroke({color:'#a70017'}). setFill({ type:'linear', x1:0, y1:0, x2:0, y2:105, colors: [{ offset:0, color:'#f3001f'},{ offset:1, color:'#a40016'}] }); // Create the blue box surface.createRect({ x:8, y:68, width:103, height:16 }). setFill('#0000ae'); // Create the text surface.createText({ x:16, y:80, text:'LONDON AJAX', align:'start'}). setFont({ family:'Arial', size:'9pt', weight:'bold' }). setFill('#ffffff'); }); </script> © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010
  21. 21. Example Fun with the London Ajax logo © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010
  22. 22. Canvas Compatibility <!DOCTYPE html> <html lang="en"> <head> <title>Canvas Example</title> </head> <body> <canvas id="myCanvas" width="320" height="320"> Your browser does not have support for Canvas. </canvas> <script> var canvas = document.getElementById('myCanvas'), ctx = canvas.getContext('2d'), grad; " " ctx.fillRect(100, 25, 100, 50); ctx.beginPath(); " " // if you forget false in FF ff 3.6 or 4 beta, it won't draw?!? ctx.arc(150, 150, 100, Math.PI * 3/2, Math.PI * 1/2, false); ctx.lineWidth = 2; ctx.lineCap = 'round'; ctx.strokeStyle = 'rgba(0, 127, 255, 0.3)'; ctx.stroke(); </script> </body> </html> © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010
  23. 23. © SitePen, Inc. All Rights Reserved Saturday, October 16, 2010

×