Re: Creating a timeline

[Thomas 'PointedEars' Lahn]

Christoph M. Becker wrote:

> Thomas 'PointedEars' Lahn wrote:
>> JFTR (CMIIW):
>> Basic SVG images (as a template for more complex ones) can be created
>> either with a text editor or a graphics editor. Canvas images must be
>> created using a text editor; it is turtle graphics without vectors: you
>> have to put down, move, and raise the pen manually, so to speak, and the
>> image does not exist before the script has been executed.
>
> Using canvas is not like turtle graphics (even though one could emulate
> turtle graphics). Actually, many of its primitive operations are
> somewhat similar to SVG.

Pardon? When I read

var canvas = document.getElementById("my-canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "green"
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.stroke();

I sense a lot of turtle graphics:

1. Select the green pen
2. Move the pen to 100, 100
3. Put down the pen
4. Move the pen to 200, 200
5. Raise the pen

Not exactly equivalent per step, but essentially what is happening.
beginPath() does not return a reference to a path object (which would be
equivalent to SVG), and there is no line object that you can manipulate
afterwards.

If you want the line just drawn to be elsewhere, you need to erase the line
(with .clearRect(), to avoid bleeding) and draw a new one (the general
recommendation is to clear the entire canvas this way). If you want the
line to be red instead of green, you need to paint a red line on top of the
green one and may still face bleeding (therefore, same recommendation in
this case).

Not so with SVG where you just change the coordinates or the color
properties of the element object:

var line = document.getElementById("my-line");

for (var coords = ["x1", "y1", "x2", "y2"], i = coords.length; i--;)
{
line[coords[i]].baseVal.value += 100;
}

line.style.stroke = "red";

>> Canvas is at the core a proprietary technology; SVG has been a W3C
>> standard from the beginning.
>
> Canvas is part of the W3C HTML5 recommendation[1].

No, the “canvas” *element* is, by virtue of the W3C now mostly copying
WHATWG specifications these days, whereas the WHATWG is dedicated to
“standardize” a careful selection of proprietary behavior (namely, that of
the browsers produced by the vendors who employ the WHATWG core members:
Apple, the Mozilla Foundation, and Opera Software [2]). But that is beside
the point.

[2] <https://wiki.whatwg.org/wiki/FAQ#What_is_the_WHATWG.3F>

> [1] <https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API>

There is nothing there that indicates that the Canvas *API* (the “core”
I wrote about) would not be proprietary.

> [Xpost and F'up2 comp.infosystems.www.authoring.html]

Does not belong there. X-Post and F'up2 .misc.


PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm> (404-comp.)

[Christoph M. Becker]

Thomas 'PointedEars' Lahn wrote:

> Christoph M. Becker wrote:
>
>> Using canvas is not like turtle graphics (even though one could emulate
>> turtle graphics). Actually, many of its primitive operations are
>> somewhat similar to SVG.
>
> Pardon? When I read
>
> var canvas = document.getElementById("my-canvas");
> var ctx = canvas.getContext("2d");
> ctx.beginPath();
> ctx.strokeStyle = "green"
> ctx.moveTo(100, 100);
> ctx.lineTo(200, 200);
> ctx.stroke();
>
> I sense a lot of turtle graphics:
>
> 1. Select the green pen
> 2. Move the pen to 100, 100
> 3. Put down the pen
> 4. Move the pen to 200, 200
> 5. Raise the pen

Indeed, that is similar to turtle graphics (where you would actually
have a turtle with a current orientation that moves n pixels in this
direction, not to a two dimensional coordinate). However, the canvas
supports more complex operations, such as drawing arcs, as well as
scaling, rotating and translating the coordination system.

> [explanation that canvas needs erasing and redrawing for changes; not
> so SVG]

I agree. However, that doesn't appear to be an issue for the OP's
needs, where no animation or otherwise dynamic change would be required.

> There is nothing there that indicates that the Canvas *API* (the “core”
> I wrote about) would not be proprietary.

You are right, that only the canvas element is part of the HTML5
Recommendation, but the HTML Canvas 2D Context is already a Candidate
Recommendation[1]; for a long time HTML5 has been also only a Candidate
Recommendation, but I have some doubt that it had to be considered a
proprietory technology back then (say a year ago), and that it has been
better to stick with HTML 4.01 until recently.

[1] <http://www.w3.org/TR/2dcontext/>

--
Christoph M. Becker