- 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
[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