W3C home > Mailing lists > Public > public-html@w3.org > July 2007

Re: Use Cases for The <canvas> Element

From: Philip Taylor <philip@zaynar.demon.co.uk>
Date: Tue, 31 Jul 2007 15:30:55 +0100
Message-ID: <46AF479F.3040803@zaynar.demon.co.uk>
To: Karl Dubost <karl@w3.org>
CC: public-html@w3.org

Karl Dubost wrote:
> Le 31 juil. 2007 à 12:16, Philip Taylor a écrit :
>> Karl Dubost wrote:
>>> * CanvasAPI doesn't give an easy way to author for many people. For  
>>> example, a simple things like circle would be very hard to author  
>>> with canvas. It means that people need to rely on authoring tools.
>>
>> That could be handled with a JS extension library, doing something like:
>>
>>   CanvasRenderingContext2D.prototype.circle = function (x, y, r) {
>>     this.beginPath();
>>     this.arc(x, y, r, 0, 2*Math.PI, true);
>>     this.closePath();
>>   }

(Oops, that code has an unintentional feature - it's probably more 
useful to say:
     CanvasRenderingContext2D.prototype.circle = function (x, y, r) {
         this.moveTo(x, y);
         this.arc(x, y, r, 0, 2*Math.PI, true);
         this.closePath();
     }
)

>>
>> and then users can simply write "ctx.circle(100, 100, 50); 
>> ctx.circle(170, 100, 50); ctx.fill();". That's more awkward for the 
>> users than having it built-in, since they have to find and include 
>> that library, but it's also more flexible and more likely to work 
>> interoperably (since the browser developers have fewer functions to 
>> put bugs in). I'm not aware of any existing efforts to provide a 
>> library like that, though.
> 
> Yes that was my point. Thanks for providing the code, it is helpful for 
> comparing. I much prefer the svg solution from an author point of view. 
> I find it easier to write (but that might be a question of personal 
> preferences).
> 
> <svg width="200px" height="200px">
>    <circle cx="100" cy="100" r="50" style="stroke: black;fill:none"/>
> </svg>

SVG is better when you want one circle like that, but an immediate-mode 
API like <canvas> makes it almost as easy to programmatically generate 
images, like a spiral of circles with:

     for (var i = 0; i < 3*Math.PI; i += 0.1)
         ctx.circle(i*10*Math.cos(i), i*10*Math.sin(i), i);
     ctx.fill();

and you can extend it to e.g. a rainbow-coloured version of the same:

     for (var i = 0; i < 3*Math.PI; i += 0.1) {
         ctx.fillStyle = 'hsl('+i*42+', 100%, 50%)';
         ctx.beginPath();
         ctx.circle(i*10*Math.cos(i), i*10*Math.sin(i), i);
         ctx.fill();
     }

and you can extend it to a fancier animated effect:

     var t = 0;
     ctx.globalAlpha = 0.2;
     setInterval(function () {
         t += 0.1;
         for (var i = 0; i < 3*Math.PI; i += 0.1) {
             ctx.fillStyle = 'hsl('+(i+2*t)*42+', 100%, 50%)';
             ctx.beginPath();
             ctx.circle(i*10*Math.cos(i+t), i*10*Math.sin(i+t*0.9), i);
             ctx.fill();
         }
     }, 100);

without having to learn any more API than the fill and alpha features.

(http://canvex.lazyilluminati.com/misc/circles.html has those examples, 
plus some hacks to make it work in Safari (at least with WebKit 
nightlies), though it still doesn't work in Opera 9.2 because of the CSS 
hsl().)

The impression I have is that SVG is much more suitable than <canvas> 
when you want static vector images of the kind you might make with tools 
like Inkscape (even if you actually write it by hand instead), and also 
better when you want to handle user interaction with the displayed scene 
(like in <http://people.mozilla.com/~vladimir/demos/photos.svg>), but 
<canvas> works better when you want to write code to generate the whole 
scene (usually when you already have a non-visual description of the 
scene either in a mathematical form or in a separate data structure).


It might be useful to consider whether SVG and <canvas> could be more 
integrated, to combine the different aspects in which they are useful. 
Drawing SVG images onto the canvas (equivalent to drawImage, but for 
vectors instead of bitmaps) could be good for putting high-quality SVG 
sprites or text onto a dynamic scene for things like games. Using the 
canvas API to generate SVG (probably via a new canvas context which is 
like the normal 2d one but doesn't include impossible features like 
getImageData) could be good for people who want a simple immediate-mode 
API to create parts of an SVG document. Is this kind of thing feasible 
to implement, and would it be worthwhile, and are there other ways that 
SVG and <canvas> could benefit from each other?

-- 
Philip Taylor
philip@zaynar.demon.co.uk
Received on Tuesday, 31 July 2007 14:31:55 UTC

This archive was generated by hypermail 2.3.1 : Monday, 29 September 2014 09:38:47 UTC