SlideShare a Scribd company logo
Cross-Browser Vector
Graphics with the Canvas
Tag and SVG
Patrick Chanezon
Ignacio Blanco
Google
Why Web Vector Graphics?




                           2
Why Web Vector Graphics?
>   Math specifications of shapes vs Array of pixels
    •   Extremely small file sizes (SVG only): 50K JPG -> ~2K SVG file
        (Gzipped)
    •   Resolution independence: from iPhone to 40quot; monitors
    •   Use existing browser skills: JavaScript, DOM, CSS
    •   Deep integration: no plugins, can interact with elements on the
        screen (video, layout, ...)
    •   Looks great: smooth antialiasing
    •   Full text markup (SVG only)
        •   Accessible friendly
        •   SEO Friendly
        •   Archive Friendly

                                                                          3
13 years of web vector graphics history
>   1996 Macromedia Flash 1
>   1998 Macromedia and Microsoft VML
>   1998 Adobe Systems and Sun Microsystems PGML
>   1998 SVG W3C
>   2001 SVG 1.0
>   2003 SVG 1.1: modularization, Tiny and Basic
>   2004 Apple Canvas -> WHATWG - HTML5, Mozilla
>   2006 Microsoft Silverlight 1.0 (WPF/E)
>   2007 Adobe Flash 9
>   2008 SVG Tiny 1.2 (R) Full 1.2 (WD) core and modules
                                                           4
Web vector graphics today


            99%              33%




                            33%
            20%



                                   5
OpenWeb vector graphics available in a browser
near you
>   Firefox, Safari (+iPhone),       http://a.deveria.com/caniuse/
    Opera, Chrome
>   ~33% browsers natively
>   Open Source JS Shims
    for Canvas and SVG (autumn
    2009) support in IE
    •   Much of SVG 1.1 Full
        supported by all browsers
        except IE
    •   Most of Canvas (except for
        text extensions) supported
        by all browsers except IE
>   No Flash in iPhone & Android

                                                                     6
<canvas> tag and Context object

>   Immediate mode graphics: fire and forget
<canvas id=quot;clockquot; width=quot;150quot; height=quot;150quot;>
  <img src=quot;fallback.pngquot; width=quot;150quot; height=quot;150quot; alt=quot;quot;/>
</canvas>

>   In Javascript get a rendering context and draw
var canvas = document.getElementById(quot;canvasquot;);
if (canvas.getContext) {
  var ctx = canvas.getContext(quot;2dquot;);

    ctx.fillStyle = quot;rgb(200,0,0)quot;;
    ctx.fillRect (10, 10, 55, 50);
}
           Examples from http://dev.opera.com/articles/view/html-5-canvas-the-basics/   7
The Grid




           from https://developer.mozilla.org/en/Canvas_tutorial   8
fill, stroke, lines, Rect

  context.fillStyle   = '#00f'; //
  blue
context.strokeStyle = '#f00'; // red
context.lineWidth   = 4;

// Draw some rectangles.
context.fillRect (0,     0, 150, 50);
context.strokeRect(0, 60, 150, 50);
context.clearRect (30, 25, 90, 60);
context.strokeRect(30, 25, 90, 60);




                                        9
Path
// Set the style properties.
context.fillStyle    = '#00f';
context.strokeStyle = '#f00';
context.lineWidth    = 4;
context.beginPath();
// Start from the top-left point.
context.moveTo(10, 10); // give the (x,y) coordinates
context.lineTo(100, 10);
context.lineTo(10, 100);
context.lineTo(10, 10);

// Done! Now fill the shape, and draw the stroke.
context.fill();
context.stroke();
context.closePath();
                                                        10
Arcs, Curves
arc(x, y, radius, startAngle, endAngle, anticlockwise)




quadraticCurveTo(cp1x, cp1y, x, y) // (BROKEN in FF 3.5)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)




                                                         11
Styles and Colors
ctx.fillStyle =   quot;orangequot;;
ctx.fillStyle =   quot;#FFA500quot;;
ctx.fillStyle =   quot;rgb(255,165,0)quot;;
ctx.strokeStyle   = quot;rgba(255,0,0,0.5)quot;;

lineWidth = value
lineCap = type
lineJoin = type
miterLimit = value

createLinearGradient(x1,y1,x2,y2)
createRadialGradient(x1,y1,r1,x2,y2,r2)
addColorStop(position, color)

createPattern(image,type)
                                           12
Images: draw, scale, slice
//drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
// Draw slice
ctx.drawImage(document.getElementById('source'),
              33,71,104,124,21,20,87,104);




// Draw frame
ctx.drawImage(document.getElementById('frame'),0,0);
context.stroke();
context.closePath();




                                                                  13
Pixel manipulation of Images, Video
computeFrame: function() {

 this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);

 let frame = this.ctx1.getImageData(0, 0, this.width, this.height);

 let l = frame.data.length / 4;


   for (let i = 0; i < l; i++) {

   
 let r = frame.data[i * 4 + 0];

   
 let g = frame.data[i * 4 + 1];

   
 let b = frame.data[i * 4 + 2];

   
 if (g > 100 && r > 100 && b < 43)

   
 
 frame.data[i * 4 + 3] = 0;

   }

   this.ctx2.putImageData(frame, 0, 0);

   return;
}




            https://developer.mozilla.org/en/manipulating_video_using_canvas   14
Tranformations
State: Canvas states are stored on a stack
save()
restore()

translate(x, y)


rotate(angle)


scale(x, y)


transform(m11, m12, m21, m22, dx, dy)
setTransform(m11, m12, m21, m22, dx, dy)
                                             15
transform example
var i = 0;
var sin = Math.sin(Math.PI/6);
var cos = Math.cos(Math.PI/6);
ctx.translate(200, 200);
var c = 0;
for (i; i <= 12; i++) {
  c = Math.floor(255 / 12 * i);
  ctx.fillStyle = quot;rgb(quot; + c + quot;,quot; + c + quot;,quot; + c + quot;)quot;;
  ctx.fillRect(0, 0, 100, 10);
  ctx.transform(cos, sin, -sin, cos, 0, 0);
}

ctx.setTransform(-1, 0, 0, 1, 200, 200);
ctx.fillStyle = quot;rgba(255, 128, 255, 0.5)quot;;
ctx.fillRect(0, 50, 100, 100);
                                                          16
2D -> Triangles -> 3D




http://kawanet.blogspot.com/2009/02/incredible-javascriptcanvas-3d-demos.html
                                                                            17
Demos

>   Yahoo Pipes
>   Bespin
>   All demos at http://delicious.com/chanezon/j1+canvas
>   More at http://delicious.com/chanezon/canvas+demos




                                                       18
Canvas Resources

>   http://delicious.com/chanezon/canvas
>   https://developer.mozilla.org/en/Canvas_tutorial
>   http://dev.opera.com/articles/view/html-5-canvas-the-basics/
>   http://blog.mozbox.org/tag/demo




                                                                   19
SVG

>   XML vocabulary for Vector Graphics
>   Retained mode graphics
>   Versions: 1.0, 1.1, 1.2
>   Profiles: Full, Basic, Tiny
>   Safe to use: SVG 1.1 Full (except some features)
    • Not widely implemented: Fonts, Animation, some
      Filters



                                                       20
Coordinates, Viewbox
<?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>
<svg xmlns=quot;http://www.w3.org/2000/svgquot;
   viewBox=quot;50 50 500 400quot;
   width=quot;800pxquot; height=quot;600pxquot; id=quot;ex1quot;>
  <g id=quot;layer1quot;>
    <rect style=quot;fill:#fffc00;stroke:#fac305;stroke-
width:20quot;
       id=quot;rect1quot; width=quot;400quot; height=quot;300quot;
       x=quot;100quot; y=quot;100quot; rx=quot;20quot; ry=quot;30quot;/>
  </g>
</svg>




                                                       21
Transformations
<rect
   width=quot;200quot; height=quot;150quot; rx=quot;30quot; ry=quot;30quot;
   x=quot;100quot; y=quot;100quot; id=quot;rect1quot;
   style=quot;opacity:0.5;fill:#ff0000;stroke:#800000;stroke-width:
20;stroke-opacity:70quot;
   transform=quot;translate(100, 150) rotate(-90) translate(-300, 25)quot;/>




                                                                  22
Grouping, Templates
<defs>
  <g id=quot;layer1quot;>
  <rect id=quot;rect1quot;
      width=quot;400quot; height=quot;300quot;
      x=quot;100quot; y=quot;100quot;
      rx=quot;20quot; ry=quot;30quot;/>
    <rect id=quot;rect2quot;
        width=quot;200quot; height=quot;150quot;
        x=quot;150quot; y=quot;200quot;
        rx=quot;20quot; ry=quot;30quot;/>
  </g>
</defs>
<use xlink:href=quot;#layer1quot; style=quot;fill:#fffc00;stroke:#fac305;stroke-width:
20quot;/>
<use xlink:href=quot;#layer1quot; transform=quot;scale(0.5) translate(300, 250)quot;
style=quot;opacity:0.5;fill:#ff0000;stroke:#800000;stroke-width:20;stroke-
opacity:70quot;/>
<use xlink:href=quot;#layer1quot; style=quot;fill:#fffc00;stroke:#fac305;stroke-width:
20quot; transform=quot;scale(0.1) translate(3200, 2500)quot;/>


                                                                             23
Path
<path
   d=quot;M 336.68898,...237.69626 zquot;
   id=quot;starquot;
   style=quot;opacity:
0.5;fill:#ff0000;stroke:#800000;stroke-width:20;stroke-
opacity:70quot;

 transform=quot;translate(20, 50) rotate(-10)quot;/>




                                                          24
Text
<path
   d=quot;M 198, ...,235.8809quot;

    id=quot;spiralquot;

    style=quot;opacity:0.0quot;/>
<text style=quot;font-size:30;font-family:Verdana;
fill:blackquot;>

 <textPath xlink:href=quot;#spiralquot;>Text spiraling out of
control!!</textPath>
</text>




                                                         25
Filters
<defs>

 <filter id=quot;drop-shadowquot;>

   <feGaussianBlur
in=quot;SourceGraphicquot; stdDeviation=quot;4quot;/>

 </filter>
  <g id=quot;layer1quot; style=quot;...>
...
  </g>
</defs>
<use xlink:href=quot;#layer1quot;/>
<use xlink:href=quot;#layer1quot;
transform=”translate(0, 350)quot;
filter=quot;url(#drop-shadow)quot;/>




                                        26
Gradients
<defs>
   <radialGradient gradientUnits=quot;userSpaceOnUsequot;
 id=quot;MyGradient2quot; cx=quot;200quot; cy=quot;75quot;
 r=quot;200quot; fx=quot;150quot; fy=quot;100quot;>
       <stop offset=quot;0quot; style=quot;stop-color:#fffc00quot;/>
       <stop offset=quot;0.5quot; style=quot;stop-color:#800000quot;/>
       <stop offset=quot;1quot; style=quot;stop-color:redquot;/>
   </radialGradient>
</defs>
<rect x=quot;0quot; y=quot;0quot; width=quot;400quot; height=quot;150quot;
style=quot;fill:url(#MyGradient2)quot;/>




                                                         27
Dom Scripting
<script type=quot;text/ecmascriptquot;>
  <![CDATA[
    function showRectColor() {
      alert(document.getElementById(quot;myBlueRectquot;).getAttribute(quot;fillquot;));
    }

   function showRectArea(evt) {
     var width = parseFloat(evt.target.getAttribute(quot;widthquot;));
     var height = parseFloat(evt.target.getAttribute(quot;heightquot;));
     alert(quot;The rectangle area is: quot; + (width * height));
   }

    function showRootChildrenNr() {
      alert(quot;Nr of Children: quot;+document.documentElement.childNodes.length);
    }
  ]]>
</script>




                                                                           28
Other features

>   Clipping, masking
>   Patterns
>   CSS Styling
>   SVG Fonts
>   ...




                        29
Browser Support
>   http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28SVG%29




>   SVG 1.1 partially supported in Firefox, Safari (+iPhone), Opera, Chrome
>   33% browsers
                                                                              30
Browser Support (details)




      http://www.codedread.com/svg-support.php - Thanks to Jeff Schiller 31
Authoring   http://www.inkscape.org/




                                   32
Whatʼs New?

>   IE Shim layer http://code.google.com/p/sgweb/
>   Conference




                                                    33
Demos

>   All demos at http://delicious.com/chanezon/j1+svg
>   More at http://delicious.com/chanezon/svg+demos




                                                        34
SVG Resources




>   http://delicious.com/chanezon/svg
>   http://www.w3.org/Consortium/Offices/Presentations/SVG/0.svg




                                                                  35
When to use Canvas or SVG
Not competing
 SVG                       <canvas>
• retained mode graphics • immediate mode graphics
• Editable static images • Script-based scene graph
• Accessibility           • Programmatic generation
                            of images
• High-quality printing
• Interaction             • Drawing pixels
• Mixing markup           • Constant performance
• Text
       Combining them possible in some browsers
                                                  36
Example: using vector graphics from a Java
Google Appengine application
>   Uses the following technologies
    • AppEngine Java
    • GWT
    • Google Chart API
    • GData API: Google Spreadsheets
    • Guardian Data API



                                             37
Patrick Chanezon
chanezon@google.com
Ignacio Blanco
blanconet@google.com

More Related Content

What's hot

CSS3 Implementable Features
CSS3 Implementable FeaturesCSS3 Implementable Features
CSS3 Implementable Features
Estelle Weyl
 
STC Summit 2015 Hypergraphics for visual-first help
STC Summit 2015 Hypergraphics for visual-first helpSTC Summit 2015 Hypergraphics for visual-first help
STC Summit 2015 Hypergraphics for visual-first help
Dave Gardiner
 
Mastering CSS Animations
Mastering CSS AnimationsMastering CSS Animations
Mastering CSS Animations
Goodbytes
 
Making Games in JavaScript
Making Games in JavaScriptMaking Games in JavaScript
Making Games in JavaScript
Sam Cartwright
 
MIDP: Game API
MIDP: Game APIMIDP: Game API
MIDP: Game API
Jussi Pohjolainen
 
SVG overview
SVG overviewSVG overview
SVG overview
Satoshi Watanabe
 

What's hot (6)

CSS3 Implementable Features
CSS3 Implementable FeaturesCSS3 Implementable Features
CSS3 Implementable Features
 
STC Summit 2015 Hypergraphics for visual-first help
STC Summit 2015 Hypergraphics for visual-first helpSTC Summit 2015 Hypergraphics for visual-first help
STC Summit 2015 Hypergraphics for visual-first help
 
Mastering CSS Animations
Mastering CSS AnimationsMastering CSS Animations
Mastering CSS Animations
 
Making Games in JavaScript
Making Games in JavaScriptMaking Games in JavaScript
Making Games in JavaScript
 
MIDP: Game API
MIDP: Game APIMIDP: Game API
MIDP: Game API
 
SVG overview
SVG overviewSVG overview
SVG overview
 

Viewers also liked

Interop 2011 - Scaling Platform As A Service
Interop 2011 - Scaling Platform As A ServiceInterop 2011 - Scaling Platform As A Service
Interop 2011 - Scaling Platform As A Service
Patrick Chanezon
 
Portrait of the Developer As "The Artist" - English Version
Portrait of the Developer As "The Artist" - English VersionPortrait of the Developer As "The Artist" - English Version
Portrait of the Developer As "The Artist" - English Version
Patrick Chanezon
 
Google Devfest 2009 Argentina - Google and the Social Web
Google Devfest 2009 Argentina - Google and the Social WebGoogle Devfest 2009 Argentina - Google and the Social Web
Google Devfest 2009 Argentina - Google and the Social Web
Patrick Chanezon
 
Cloud Foundry Japan Community Meetup
Cloud Foundry Japan Community MeetupCloud Foundry Japan Community Meetup
Cloud Foundry Japan Community Meetup
Patrick Chanezon
 
Cloud Foundry Open Tour Beijing: Becoming a Node.js Ninja on
 Cloud Foundry
Cloud Foundry Open Tour Beijing: Becoming a Node.js Ninja on
 Cloud FoundryCloud Foundry Open Tour Beijing: Becoming a Node.js Ninja on
 Cloud Foundry
Cloud Foundry Open Tour Beijing: Becoming a Node.js Ninja on
 Cloud Foundry
Patrick Chanezon
 
Tackling complexity in giant systems: approaches from several cloud providers
Tackling complexity in giant systems: approaches from several cloud providersTackling complexity in giant systems: approaches from several cloud providers
Tackling complexity in giant systems: approaches from several cloud providers
Patrick Chanezon
 

Viewers also liked (6)

Interop 2011 - Scaling Platform As A Service
Interop 2011 - Scaling Platform As A ServiceInterop 2011 - Scaling Platform As A Service
Interop 2011 - Scaling Platform As A Service
 
Portrait of the Developer As "The Artist" - English Version
Portrait of the Developer As "The Artist" - English VersionPortrait of the Developer As "The Artist" - English Version
Portrait of the Developer As "The Artist" - English Version
 
Google Devfest 2009 Argentina - Google and the Social Web
Google Devfest 2009 Argentina - Google and the Social WebGoogle Devfest 2009 Argentina - Google and the Social Web
Google Devfest 2009 Argentina - Google and the Social Web
 
Cloud Foundry Japan Community Meetup
Cloud Foundry Japan Community MeetupCloud Foundry Japan Community Meetup
Cloud Foundry Japan Community Meetup
 
Cloud Foundry Open Tour Beijing: Becoming a Node.js Ninja on
 Cloud Foundry
Cloud Foundry Open Tour Beijing: Becoming a Node.js Ninja on
 Cloud FoundryCloud Foundry Open Tour Beijing: Becoming a Node.js Ninja on
 Cloud Foundry
Cloud Foundry Open Tour Beijing: Becoming a Node.js Ninja on
 Cloud Foundry
 
Tackling complexity in giant systems: approaches from several cloud providers
Tackling complexity in giant systems: approaches from several cloud providersTackling complexity in giant systems: approaches from several cloud providers
Tackling complexity in giant systems: approaches from several cloud providers
 

Similar to JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG

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
 
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleWeb Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Estelle Weyl
 
Web Vector Graphics
Web Vector GraphicsWeb Vector Graphics
Web Vector Graphics
Dmitry Baranovskiy
 
HTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game TechHTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game Tech
vincent_scheib
 
Standards.Next: Canvas
Standards.Next: CanvasStandards.Next: Canvas
Standards.Next: Canvas
Martin Kliehm
 
JSinSA - JS Visualisation APIs
JSinSA - JS Visualisation APIsJSinSA - JS Visualisation APIs
JSinSA - JS Visualisation APIs
Brendon McLean
 
Webcast 09/2008 - Silverlight 2 Beta 2
Webcast 09/2008 - Silverlight 2 Beta 2Webcast 09/2008 - Silverlight 2 Beta 2
Webcast 09/2008 - Silverlight 2 Beta 2
sleguiza
 
An Introduction To jQuery
An Introduction To jQueryAn Introduction To jQuery
An Introduction To jQuery
Andy Gibson
 
Hardboiled Web Design
Hardboiled Web DesignHardboiled Web Design
Hardboiled Web Design
Vincent Smedinga
 
Working With Canvas
Working With CanvasWorking With Canvas
Working With Canvas
Diogo Antunes
 
Beholding the giant pyramid of application development; why Ajax applications...
Beholding the giant pyramid of application development; why Ajax applications...Beholding the giant pyramid of application development; why Ajax applications...
Beholding the giant pyramid of application development; why Ajax applications...
Javeline B.V.
 
Svg Overview And Js Libraries
Svg Overview And Js LibrariesSvg Overview And Js Libraries
Svg Overview And Js Libraries
seamusjr
 
A More Flash Like Web?
A More Flash Like Web?A More Flash Like Web?
A More Flash Like Web?
Murat Can ALPAY
 
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Sreejith Nair
 
HTML5 - Daha Flash bir web?
HTML5 - Daha Flash bir web?HTML5 - Daha Flash bir web?
HTML5 - Daha Flash bir web?
Ankara JUG
 
Interactive Vector-Graphics in the Browser
Interactive Vector-Graphics in the BrowserInteractive Vector-Graphics in the Browser
Interactive Vector-Graphics in the Browser
tec
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
Remy Sharp
 
Building high-fidelity interactive prototypes with jQuery
Building high-fidelity interactive prototypes with jQueryBuilding high-fidelity interactive prototypes with jQuery
Building high-fidelity interactive prototypes with jQuery
David Park
 
[A5]deview 2012 pt hds webkit_gpu
[A5]deview 2012 pt hds webkit_gpu[A5]deview 2012 pt hds webkit_gpu
[A5]deview 2012 pt hds webkit_gpu
NAVER D2
 
Degrafa Beta 3 - 360|MAX
Degrafa Beta 3 - 360|MAXDegrafa Beta 3 - 360|MAX
Degrafa Beta 3 - 360|MAX
Juan Sanchez
 

Similar to JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG (20)

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?
 
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleWeb Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
 
Web Vector Graphics
Web Vector GraphicsWeb Vector Graphics
Web Vector Graphics
 
HTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game TechHTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game Tech
 
Standards.Next: Canvas
Standards.Next: CanvasStandards.Next: Canvas
Standards.Next: Canvas
 
JSinSA - JS Visualisation APIs
JSinSA - JS Visualisation APIsJSinSA - JS Visualisation APIs
JSinSA - JS Visualisation APIs
 
Webcast 09/2008 - Silverlight 2 Beta 2
Webcast 09/2008 - Silverlight 2 Beta 2Webcast 09/2008 - Silverlight 2 Beta 2
Webcast 09/2008 - Silverlight 2 Beta 2
 
An Introduction To jQuery
An Introduction To jQueryAn Introduction To jQuery
An Introduction To jQuery
 
Hardboiled Web Design
Hardboiled Web DesignHardboiled Web Design
Hardboiled Web Design
 
Working With Canvas
Working With CanvasWorking With Canvas
Working With Canvas
 
Beholding the giant pyramid of application development; why Ajax applications...
Beholding the giant pyramid of application development; why Ajax applications...Beholding the giant pyramid of application development; why Ajax applications...
Beholding the giant pyramid of application development; why Ajax applications...
 
Svg Overview And Js Libraries
Svg Overview And Js LibrariesSvg Overview And Js Libraries
Svg Overview And Js Libraries
 
A More Flash Like Web?
A More Flash Like Web?A More Flash Like Web?
A More Flash Like Web?
 
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
 
HTML5 - Daha Flash bir web?
HTML5 - Daha Flash bir web?HTML5 - Daha Flash bir web?
HTML5 - Daha Flash bir web?
 
Interactive Vector-Graphics in the Browser
Interactive Vector-Graphics in the BrowserInteractive Vector-Graphics in the Browser
Interactive Vector-Graphics in the Browser
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
 
Building high-fidelity interactive prototypes with jQuery
Building high-fidelity interactive prototypes with jQueryBuilding high-fidelity interactive prototypes with jQuery
Building high-fidelity interactive prototypes with jQuery
 
[A5]deview 2012 pt hds webkit_gpu
[A5]deview 2012 pt hds webkit_gpu[A5]deview 2012 pt hds webkit_gpu
[A5]deview 2012 pt hds webkit_gpu
 
Degrafa Beta 3 - 360|MAX
Degrafa Beta 3 - 360|MAXDegrafa Beta 3 - 360|MAX
Degrafa Beta 3 - 360|MAX
 

More from Patrick Chanezon

KubeCon 2019 - Scaling your cluster (both ways)
KubeCon 2019 - Scaling your cluster (both ways)KubeCon 2019 - Scaling your cluster (both ways)
KubeCon 2019 - Scaling your cluster (both ways)
Patrick Chanezon
 
KubeCon China 2019 - Building Apps with Containers, Functions and Managed Ser...
KubeCon China 2019 - Building Apps with Containers, Functions and Managed Ser...KubeCon China 2019 - Building Apps with Containers, Functions and Managed Ser...
KubeCon China 2019 - Building Apps with Containers, Functions and Managed Ser...
Patrick Chanezon
 
Dockercon 2019 Developing Apps with Containers, Functions and Cloud Services
Dockercon 2019 Developing Apps with Containers, Functions and Cloud ServicesDockercon 2019 Developing Apps with Containers, Functions and Cloud Services
Dockercon 2019 Developing Apps with Containers, Functions and Cloud Services
Patrick Chanezon
 
GIDS 2019: Developing Apps with Containers, Functions and Cloud Services
GIDS 2019: Developing Apps with Containers, Functions and Cloud ServicesGIDS 2019: Developing Apps with Containers, Functions and Cloud Services
GIDS 2019: Developing Apps with Containers, Functions and Cloud Services
Patrick Chanezon
 
Docker Enterprise Workshop - Intro
Docker Enterprise Workshop - IntroDocker Enterprise Workshop - Intro
Docker Enterprise Workshop - Intro
Patrick Chanezon
 
Docker Enterprise Workshop - Technical
Docker Enterprise Workshop - TechnicalDocker Enterprise Workshop - Technical
Docker Enterprise Workshop - Technical
Patrick Chanezon
 
The Tao of Docker - ITES 2018
The Tao of Docker - ITES 2018The Tao of Docker - ITES 2018
The Tao of Docker - ITES 2018
Patrick Chanezon
 
Moby KubeCon 2017
Moby KubeCon 2017Moby KubeCon 2017
Moby KubeCon 2017
Patrick Chanezon
 
Microsoft Techsummit Zurich Docker and Microsoft
Microsoft Techsummit Zurich Docker and MicrosoftMicrosoft Techsummit Zurich Docker and Microsoft
Microsoft Techsummit Zurich Docker and Microsoft
Patrick Chanezon
 
Develop and deploy Kubernetes applications with Docker - IBM Index 2018
Develop and deploy Kubernetes  applications with Docker - IBM Index 2018Develop and deploy Kubernetes  applications with Docker - IBM Index 2018
Develop and deploy Kubernetes applications with Docker - IBM Index 2018
Patrick Chanezon
 
Docker Meetup Feb 2018 Develop and deploy Kubernetes Apps with Docker
Docker Meetup Feb 2018 Develop and deploy Kubernetes Apps with DockerDocker Meetup Feb 2018 Develop and deploy Kubernetes Apps with Docker
Docker Meetup Feb 2018 Develop and deploy Kubernetes Apps with Docker
Patrick Chanezon
 
DockerCon EU 2017 Recap
DockerCon EU 2017 RecapDockerCon EU 2017 Recap
DockerCon EU 2017 Recap
Patrick Chanezon
 
Docker Innovation Culture
Docker Innovation CultureDocker Innovation Culture
Docker Innovation Culture
Patrick Chanezon
 
The Tao of Docker - Devfest Nantes 2017
The Tao of Docker - Devfest Nantes 2017The Tao of Docker - Devfest Nantes 2017
The Tao of Docker - Devfest Nantes 2017
Patrick Chanezon
 
Docker 之道 Modernize Traditional Applications with 无为 Create New Cloud Native ...
Docker 之道 Modernize Traditional Applications with 无为 Create New Cloud Native ...Docker 之道 Modernize Traditional Applications with 无为 Create New Cloud Native ...
Docker 之道 Modernize Traditional Applications with 无为 Create New Cloud Native ...
Patrick Chanezon
 
Moby Open Source Summit North America 2017
Moby Open Source Summit North America 2017Moby Open Source Summit North America 2017
Moby Open Source Summit North America 2017
Patrick Chanezon
 
Moby Introduction - June 2017
Moby Introduction - June 2017Moby Introduction - June 2017
Moby Introduction - June 2017
Patrick Chanezon
 
Docker Cap Gemini CloudXperience 2017 - la revolution des conteneurs logiciels
Docker Cap Gemini CloudXperience 2017 - la revolution des conteneurs logicielsDocker Cap Gemini CloudXperience 2017 - la revolution des conteneurs logiciels
Docker Cap Gemini CloudXperience 2017 - la revolution des conteneurs logiciels
Patrick Chanezon
 
Weave User Group Talk - DockerCon 2017 Recap
Weave User Group Talk - DockerCon 2017 RecapWeave User Group Talk - DockerCon 2017 Recap
Weave User Group Talk - DockerCon 2017 Recap
Patrick Chanezon
 
Oscon 2017: Build your own container-based system with the Moby project
Oscon 2017: Build your own container-based system with the Moby projectOscon 2017: Build your own container-based system with the Moby project
Oscon 2017: Build your own container-based system with the Moby project
Patrick Chanezon
 

More from Patrick Chanezon (20)

KubeCon 2019 - Scaling your cluster (both ways)
KubeCon 2019 - Scaling your cluster (both ways)KubeCon 2019 - Scaling your cluster (both ways)
KubeCon 2019 - Scaling your cluster (both ways)
 
KubeCon China 2019 - Building Apps with Containers, Functions and Managed Ser...
KubeCon China 2019 - Building Apps with Containers, Functions and Managed Ser...KubeCon China 2019 - Building Apps with Containers, Functions and Managed Ser...
KubeCon China 2019 - Building Apps with Containers, Functions and Managed Ser...
 
Dockercon 2019 Developing Apps with Containers, Functions and Cloud Services
Dockercon 2019 Developing Apps with Containers, Functions and Cloud ServicesDockercon 2019 Developing Apps with Containers, Functions and Cloud Services
Dockercon 2019 Developing Apps with Containers, Functions and Cloud Services
 
GIDS 2019: Developing Apps with Containers, Functions and Cloud Services
GIDS 2019: Developing Apps with Containers, Functions and Cloud ServicesGIDS 2019: Developing Apps with Containers, Functions and Cloud Services
GIDS 2019: Developing Apps with Containers, Functions and Cloud Services
 
Docker Enterprise Workshop - Intro
Docker Enterprise Workshop - IntroDocker Enterprise Workshop - Intro
Docker Enterprise Workshop - Intro
 
Docker Enterprise Workshop - Technical
Docker Enterprise Workshop - TechnicalDocker Enterprise Workshop - Technical
Docker Enterprise Workshop - Technical
 
The Tao of Docker - ITES 2018
The Tao of Docker - ITES 2018The Tao of Docker - ITES 2018
The Tao of Docker - ITES 2018
 
Moby KubeCon 2017
Moby KubeCon 2017Moby KubeCon 2017
Moby KubeCon 2017
 
Microsoft Techsummit Zurich Docker and Microsoft
Microsoft Techsummit Zurich Docker and MicrosoftMicrosoft Techsummit Zurich Docker and Microsoft
Microsoft Techsummit Zurich Docker and Microsoft
 
Develop and deploy Kubernetes applications with Docker - IBM Index 2018
Develop and deploy Kubernetes  applications with Docker - IBM Index 2018Develop and deploy Kubernetes  applications with Docker - IBM Index 2018
Develop and deploy Kubernetes applications with Docker - IBM Index 2018
 
Docker Meetup Feb 2018 Develop and deploy Kubernetes Apps with Docker
Docker Meetup Feb 2018 Develop and deploy Kubernetes Apps with DockerDocker Meetup Feb 2018 Develop and deploy Kubernetes Apps with Docker
Docker Meetup Feb 2018 Develop and deploy Kubernetes Apps with Docker
 
DockerCon EU 2017 Recap
DockerCon EU 2017 RecapDockerCon EU 2017 Recap
DockerCon EU 2017 Recap
 
Docker Innovation Culture
Docker Innovation CultureDocker Innovation Culture
Docker Innovation Culture
 
The Tao of Docker - Devfest Nantes 2017
The Tao of Docker - Devfest Nantes 2017The Tao of Docker - Devfest Nantes 2017
The Tao of Docker - Devfest Nantes 2017
 
Docker 之道 Modernize Traditional Applications with 无为 Create New Cloud Native ...
Docker 之道 Modernize Traditional Applications with 无为 Create New Cloud Native ...Docker 之道 Modernize Traditional Applications with 无为 Create New Cloud Native ...
Docker 之道 Modernize Traditional Applications with 无为 Create New Cloud Native ...
 
Moby Open Source Summit North America 2017
Moby Open Source Summit North America 2017Moby Open Source Summit North America 2017
Moby Open Source Summit North America 2017
 
Moby Introduction - June 2017
Moby Introduction - June 2017Moby Introduction - June 2017
Moby Introduction - June 2017
 
Docker Cap Gemini CloudXperience 2017 - la revolution des conteneurs logiciels
Docker Cap Gemini CloudXperience 2017 - la revolution des conteneurs logicielsDocker Cap Gemini CloudXperience 2017 - la revolution des conteneurs logiciels
Docker Cap Gemini CloudXperience 2017 - la revolution des conteneurs logiciels
 
Weave User Group Talk - DockerCon 2017 Recap
Weave User Group Talk - DockerCon 2017 RecapWeave User Group Talk - DockerCon 2017 Recap
Weave User Group Talk - DockerCon 2017 Recap
 
Oscon 2017: Build your own container-based system with the Moby project
Oscon 2017: Build your own container-based system with the Moby projectOscon 2017: Build your own container-based system with the Moby project
Oscon 2017: Build your own container-based system with the Moby project
 

Recently uploaded

High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
bhumivarma35300
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Kunal Gupta
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
Priyanka Aash
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
Priyanka Aash
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
aakash malhotra
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Networks
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
kumarjarun2010
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
The Role of Technology in Payroll Statutory Compliance (1).pdf
The Role of Technology in Payroll Statutory Compliance (1).pdfThe Role of Technology in Payroll Statutory Compliance (1).pdf
The Role of Technology in Payroll Statutory Compliance (1).pdf
paysquare consultancy
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
Applying Retrieval-Augmented Generation (RAG) to Combat Hallucinations in GenAI
Applying Retrieval-Augmented Generation (RAG) to Combat Hallucinations in GenAIApplying Retrieval-Augmented Generation (RAG) to Combat Hallucinations in GenAI
Applying Retrieval-Augmented Generation (RAG) to Combat Hallucinations in GenAI
ssuserd4e0d2
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
Zilliz
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
SynapseIndia
 

Recently uploaded (20)

High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
The Role of Technology in Payroll Statutory Compliance (1).pdf
The Role of Technology in Payroll Statutory Compliance (1).pdfThe Role of Technology in Payroll Statutory Compliance (1).pdf
The Role of Technology in Payroll Statutory Compliance (1).pdf
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
Applying Retrieval-Augmented Generation (RAG) to Combat Hallucinations in GenAI
Applying Retrieval-Augmented Generation (RAG) to Combat Hallucinations in GenAIApplying Retrieval-Augmented Generation (RAG) to Combat Hallucinations in GenAI
Applying Retrieval-Augmented Generation (RAG) to Combat Hallucinations in GenAI
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
 

JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG

  • 1. Cross-Browser Vector Graphics with the Canvas Tag and SVG Patrick Chanezon Ignacio Blanco Google
  • 2. Why Web Vector Graphics? 2
  • 3. Why Web Vector Graphics? > Math specifications of shapes vs Array of pixels • Extremely small file sizes (SVG only): 50K JPG -> ~2K SVG file (Gzipped) • Resolution independence: from iPhone to 40quot; monitors • Use existing browser skills: JavaScript, DOM, CSS • Deep integration: no plugins, can interact with elements on the screen (video, layout, ...) • Looks great: smooth antialiasing • Full text markup (SVG only) • Accessible friendly • SEO Friendly • Archive Friendly 3
  • 4. 13 years of web vector graphics history > 1996 Macromedia Flash 1 > 1998 Macromedia and Microsoft VML > 1998 Adobe Systems and Sun Microsystems PGML > 1998 SVG W3C > 2001 SVG 1.0 > 2003 SVG 1.1: modularization, Tiny and Basic > 2004 Apple Canvas -> WHATWG - HTML5, Mozilla > 2006 Microsoft Silverlight 1.0 (WPF/E) > 2007 Adobe Flash 9 > 2008 SVG Tiny 1.2 (R) Full 1.2 (WD) core and modules 4
  • 5. Web vector graphics today 99% 33% 33% 20% 5
  • 6. OpenWeb vector graphics available in a browser near you > Firefox, Safari (+iPhone), http://a.deveria.com/caniuse/ Opera, Chrome > ~33% browsers natively > Open Source JS Shims for Canvas and SVG (autumn 2009) support in IE • Much of SVG 1.1 Full supported by all browsers except IE • Most of Canvas (except for text extensions) supported by all browsers except IE > No Flash in iPhone & Android 6
  • 7. <canvas> tag and Context object > Immediate mode graphics: fire and forget <canvas id=quot;clockquot; width=quot;150quot; height=quot;150quot;> <img src=quot;fallback.pngquot; width=quot;150quot; height=quot;150quot; alt=quot;quot;/> </canvas> > In Javascript get a rendering context and draw var canvas = document.getElementById(quot;canvasquot;); if (canvas.getContext) { var ctx = canvas.getContext(quot;2dquot;); ctx.fillStyle = quot;rgb(200,0,0)quot;; ctx.fillRect (10, 10, 55, 50); } Examples from http://dev.opera.com/articles/view/html-5-canvas-the-basics/ 7
  • 8. The Grid from https://developer.mozilla.org/en/Canvas_tutorial 8
  • 9. fill, stroke, lines, Rect context.fillStyle = '#00f'; // blue context.strokeStyle = '#f00'; // red context.lineWidth = 4; // Draw some rectangles. context.fillRect (0, 0, 150, 50); context.strokeRect(0, 60, 150, 50); context.clearRect (30, 25, 90, 60); context.strokeRect(30, 25, 90, 60); 9
  • 10. Path // Set the style properties. context.fillStyle = '#00f'; context.strokeStyle = '#f00'; context.lineWidth = 4; context.beginPath(); // Start from the top-left point. context.moveTo(10, 10); // give the (x,y) coordinates context.lineTo(100, 10); context.lineTo(10, 100); context.lineTo(10, 10); // Done! Now fill the shape, and draw the stroke. context.fill(); context.stroke(); context.closePath(); 10
  • 11. Arcs, Curves arc(x, y, radius, startAngle, endAngle, anticlockwise) quadraticCurveTo(cp1x, cp1y, x, y) // (BROKEN in FF 3.5) bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 11
  • 12. Styles and Colors ctx.fillStyle = quot;orangequot;; ctx.fillStyle = quot;#FFA500quot;; ctx.fillStyle = quot;rgb(255,165,0)quot;; ctx.strokeStyle = quot;rgba(255,0,0,0.5)quot;; lineWidth = value lineCap = type lineJoin = type miterLimit = value createLinearGradient(x1,y1,x2,y2) createRadialGradient(x1,y1,r1,x2,y2,r2) addColorStop(position, color) createPattern(image,type) 12
  • 13. Images: draw, scale, slice //drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) // Draw slice ctx.drawImage(document.getElementById('source'), 33,71,104,124,21,20,87,104); // Draw frame ctx.drawImage(document.getElementById('frame'),0,0); context.stroke(); context.closePath(); 13
  • 14. Pixel manipulation of Images, Video computeFrame: function() { this.ctx1.drawImage(this.video, 0, 0, this.width, this.height); let frame = this.ctx1.getImageData(0, 0, this.width, this.height); let l = frame.data.length / 4; for (let i = 0; i < l; i++) { let r = frame.data[i * 4 + 0]; let g = frame.data[i * 4 + 1]; let b = frame.data[i * 4 + 2]; if (g > 100 && r > 100 && b < 43) frame.data[i * 4 + 3] = 0; } this.ctx2.putImageData(frame, 0, 0); return; } https://developer.mozilla.org/en/manipulating_video_using_canvas 14
  • 15. Tranformations State: Canvas states are stored on a stack save() restore() translate(x, y) rotate(angle) scale(x, y) transform(m11, m12, m21, m22, dx, dy) setTransform(m11, m12, m21, m22, dx, dy) 15
  • 16. transform example var i = 0; var sin = Math.sin(Math.PI/6); var cos = Math.cos(Math.PI/6); ctx.translate(200, 200); var c = 0; for (i; i <= 12; i++) { c = Math.floor(255 / 12 * i); ctx.fillStyle = quot;rgb(quot; + c + quot;,quot; + c + quot;,quot; + c + quot;)quot;; ctx.fillRect(0, 0, 100, 10); ctx.transform(cos, sin, -sin, cos, 0, 0); } ctx.setTransform(-1, 0, 0, 1, 200, 200); ctx.fillStyle = quot;rgba(255, 128, 255, 0.5)quot;; ctx.fillRect(0, 50, 100, 100); 16
  • 17. 2D -> Triangles -> 3D http://kawanet.blogspot.com/2009/02/incredible-javascriptcanvas-3d-demos.html 17
  • 18. Demos > Yahoo Pipes > Bespin > All demos at http://delicious.com/chanezon/j1+canvas > More at http://delicious.com/chanezon/canvas+demos 18
  • 19. Canvas Resources > http://delicious.com/chanezon/canvas > https://developer.mozilla.org/en/Canvas_tutorial > http://dev.opera.com/articles/view/html-5-canvas-the-basics/ > http://blog.mozbox.org/tag/demo 19
  • 20. SVG > XML vocabulary for Vector Graphics > Retained mode graphics > Versions: 1.0, 1.1, 1.2 > Profiles: Full, Basic, Tiny > Safe to use: SVG 1.1 Full (except some features) • Not widely implemented: Fonts, Animation, some Filters 20
  • 21. Coordinates, Viewbox <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?> <svg xmlns=quot;http://www.w3.org/2000/svgquot; viewBox=quot;50 50 500 400quot; width=quot;800pxquot; height=quot;600pxquot; id=quot;ex1quot;> <g id=quot;layer1quot;> <rect style=quot;fill:#fffc00;stroke:#fac305;stroke- width:20quot; id=quot;rect1quot; width=quot;400quot; height=quot;300quot; x=quot;100quot; y=quot;100quot; rx=quot;20quot; ry=quot;30quot;/> </g> </svg> 21
  • 22. Transformations <rect width=quot;200quot; height=quot;150quot; rx=quot;30quot; ry=quot;30quot; x=quot;100quot; y=quot;100quot; id=quot;rect1quot; style=quot;opacity:0.5;fill:#ff0000;stroke:#800000;stroke-width: 20;stroke-opacity:70quot; transform=quot;translate(100, 150) rotate(-90) translate(-300, 25)quot;/> 22
  • 23. Grouping, Templates <defs> <g id=quot;layer1quot;> <rect id=quot;rect1quot; width=quot;400quot; height=quot;300quot; x=quot;100quot; y=quot;100quot; rx=quot;20quot; ry=quot;30quot;/> <rect id=quot;rect2quot; width=quot;200quot; height=quot;150quot; x=quot;150quot; y=quot;200quot; rx=quot;20quot; ry=quot;30quot;/> </g> </defs> <use xlink:href=quot;#layer1quot; style=quot;fill:#fffc00;stroke:#fac305;stroke-width: 20quot;/> <use xlink:href=quot;#layer1quot; transform=quot;scale(0.5) translate(300, 250)quot; style=quot;opacity:0.5;fill:#ff0000;stroke:#800000;stroke-width:20;stroke- opacity:70quot;/> <use xlink:href=quot;#layer1quot; style=quot;fill:#fffc00;stroke:#fac305;stroke-width: 20quot; transform=quot;scale(0.1) translate(3200, 2500)quot;/> 23
  • 24. Path <path d=quot;M 336.68898,...237.69626 zquot; id=quot;starquot; style=quot;opacity: 0.5;fill:#ff0000;stroke:#800000;stroke-width:20;stroke- opacity:70quot; transform=quot;translate(20, 50) rotate(-10)quot;/> 24
  • 25. Text <path d=quot;M 198, ...,235.8809quot; id=quot;spiralquot; style=quot;opacity:0.0quot;/> <text style=quot;font-size:30;font-family:Verdana; fill:blackquot;> <textPath xlink:href=quot;#spiralquot;>Text spiraling out of control!!</textPath> </text> 25
  • 26. Filters <defs> <filter id=quot;drop-shadowquot;> <feGaussianBlur in=quot;SourceGraphicquot; stdDeviation=quot;4quot;/> </filter> <g id=quot;layer1quot; style=quot;...> ... </g> </defs> <use xlink:href=quot;#layer1quot;/> <use xlink:href=quot;#layer1quot; transform=”translate(0, 350)quot; filter=quot;url(#drop-shadow)quot;/> 26
  • 27. Gradients <defs> <radialGradient gradientUnits=quot;userSpaceOnUsequot; id=quot;MyGradient2quot; cx=quot;200quot; cy=quot;75quot; r=quot;200quot; fx=quot;150quot; fy=quot;100quot;> <stop offset=quot;0quot; style=quot;stop-color:#fffc00quot;/> <stop offset=quot;0.5quot; style=quot;stop-color:#800000quot;/> <stop offset=quot;1quot; style=quot;stop-color:redquot;/> </radialGradient> </defs> <rect x=quot;0quot; y=quot;0quot; width=quot;400quot; height=quot;150quot; style=quot;fill:url(#MyGradient2)quot;/> 27
  • 28. Dom Scripting <script type=quot;text/ecmascriptquot;> <![CDATA[ function showRectColor() { alert(document.getElementById(quot;myBlueRectquot;).getAttribute(quot;fillquot;)); } function showRectArea(evt) { var width = parseFloat(evt.target.getAttribute(quot;widthquot;)); var height = parseFloat(evt.target.getAttribute(quot;heightquot;)); alert(quot;The rectangle area is: quot; + (width * height)); } function showRootChildrenNr() { alert(quot;Nr of Children: quot;+document.documentElement.childNodes.length); } ]]> </script> 28
  • 29. Other features > Clipping, masking > Patterns > CSS Styling > SVG Fonts > ... 29
  • 30. Browser Support > http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28SVG%29 > SVG 1.1 partially supported in Firefox, Safari (+iPhone), Opera, Chrome > 33% browsers 30
  • 31. Browser Support (details) http://www.codedread.com/svg-support.php - Thanks to Jeff Schiller 31
  • 32. Authoring http://www.inkscape.org/ 32
  • 33. Whatʼs New? > IE Shim layer http://code.google.com/p/sgweb/ > Conference 33
  • 34. Demos > All demos at http://delicious.com/chanezon/j1+svg > More at http://delicious.com/chanezon/svg+demos 34
  • 35. SVG Resources > http://delicious.com/chanezon/svg > http://www.w3.org/Consortium/Offices/Presentations/SVG/0.svg 35
  • 36. When to use Canvas or SVG Not competing SVG <canvas> • retained mode graphics • immediate mode graphics • Editable static images • Script-based scene graph • Accessibility • Programmatic generation of images • High-quality printing • Interaction • Drawing pixels • Mixing markup • Constant performance • Text Combining them possible in some browsers 36
  • 37. Example: using vector graphics from a Java Google Appengine application > Uses the following technologies • AppEngine Java • GWT • Google Chart API • GData API: Google Spreadsheets • Guardian Data API 37