W3C home > Mailing lists > Public > www-archive@w3.org > November 2004

Re: SVG 1.2 Comment: Detailed last call comments (all chapters)

From: Ian Hickson <ian@hixie.ch>
Date: Fri, 5 Nov 2004 01:34:44 +0000 (UTC)
To: Antoine Quint <ml@graougraou.com>
Cc: www-archive@w3.org
Message-ID: <Pine.LNX.4.61.0411050101070.8631@dhalsim.dreamhost.com>


[Taken off www-svg since JonF requested that I not send non-SVG-related 
content to the www-svg list. cc'ing www-archive instead.]

You wrote:
> Can you elaborate on how <canvas> makes dynamic graphics generation 
> easier with a concrete example?

Sure.

Say you wanted to draw a circle around a point on a photograph, as part 
of a Web page. Radius 10px, two pixel black stroke, no fill. In the 
examples below I've omitted the fallback content in both versions, in 
order to concentrate on the differences.

With SVG, you would do somthing like:

  <?xml-stylesheet href="doc.css"?>
  <html xmlns="http://www.w3.org/1999/xhtml">
   <!-- ... -->
    <svg xmlns="http://www.w3.org/2000/svg" id="photo"
         xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- the photograph -->
     <image width="100%" height="100%" xlink:href="photo.jpg"/>
     <script type="text/javascript">
      var svg = document.getElementById('photo');
      function addCircle(x, y) {
        var c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        c.cx.baseVal.newValueSpecifiedUnits(c.cx.baseVal.SVG_LENGTH_PX, x);
        c.cy.baseVal.newValueSpecifiedUnits(c.cy.baseVal.SVG_LENGTH_PX, y);
        c.r.baseVal.newValueSpecifiedUnits(c.cy.baseVal.SVG_LENGTH_PX, 10);
        c.style.setProperty('fill', 'none');
        c.style.setProperty('stroke', 'black');
        c.style.setProperty('stroke-width', '2px');
        svg.appendChild(c);
      }
     </script>
    </svg>
   <!-- ... -->
   <!-- then later call addCircle(x, y); -->
  </html>

With <canvas>, it would be something like:

  <?xml-stylesheet href="doc.css"?>
  <html xmlns="http://www.w3.org/1999/xhtml">
   <!-- ... -->
    <img src="photo.jpg" alt=""/>
    <canvas id="photo"/>
    <script type="text/javascript"> 
     var canvas = document.getElementById('photo').getContext('2d');
     function addCircle(x, y) {
      canvas.lineWidth = 2;
      canvas.moveTo(x - 10, y);
      canvas.arc(x, y, 10, 0, Math.PI * 2, true);
      canvas.stroke();
     }
    </script>
   <!-- ... -->
   <!-- then later call addCircle(x, y); -->
  </html>

In both cases, doc.css handles positioning the photograph and so forth.

If there's an easier way to do the SVG version, please let me know.      

Cheers,
-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'
Received on Friday, 5 November 2004 01:34:48 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 7 January 2015 14:42:49 UTC