<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
On 11/23/2010 6:46 PM, Robert O'Callahan wrote:
<blockquote
cite="mid:AANLkTi=YC52P+Ap27rq8U5x_+dF0xyKoQGUwuULCgsy8@mail.gmail.com"
type="cite">On Wed, Nov 24, 2010 at 3:30 PM, Charles Pritchard <span
dir="ltr"><<a moz-do-not-send="true"
href="mailto:chuck@jumis.com">chuck@jumis.com</a>></span>
wrote:<br>
<div class="gmail_quote">
<blockquote class="gmail_quote" style="margin: 0pt 0pt 0pt
0.8ex; border-left: 1px solid rgb(204, 204, 204);
padding-left: 1ex;">
SVG is a document format. It is not reliably implemented.
It's far more expensive to implement SVG on a new environment
than Canvas.<br>
</blockquote>
<div><br>
So? You don't have to implement it.<br>
</div>
</div>
</blockquote>
Google, Microsoft, Apple, do, have to implement it.<br>
<br>
As an app designer, my app should work on ~ four different browsers.
I need my app to work, with what's out there in practice.<br>
<br>
And for other environments, I would have to. I've implemented for
JVM, Active X (thanks Vlad/Mozilla), Flash and .Net.<br>
<br>
<blockquote
cite="mid:AANLkTi=YC52P+Ap27rq8U5x_+dF0xyKoQGUwuULCgsy8@mail.gmail.com"
type="cite">
<div class="gmail_quote">
<blockquote class="gmail_quote" style="margin: 0pt 0pt 0pt
0.8ex; border-left: 1px solid rgb(204, 204, 204);
padding-left: 1ex;">
I can't do much for you here other than explain to you what
I'm hearing.<br>
a) Why are you using our Canvas implementation instead of our
SVG implementation.<br>
b) Why are you using ctx.fillText('Test') instead of
element.appendChild(document.createElement('text')).textContent
= 'Test'.<br>
<br>
For answers<br>
a: I'm using it because I work across a variety of browser
platforms. Canvas is far better supported.<br>
</blockquote>
<div><br>
It doesn't make sense to request entirely new features (that
by definition aren't currently supported) because existing
features aren't widely supported.<br>
<br>
</div>
</div>
</blockquote>
It's currently supported by Microsoft, and to a lesser extent,
WebKit. It's not features, it's one feature.<br>
And as you pointed out, it may be supported in FF4; though it's
behavior is not standardized.<br>
<br>
<blockquote
cite="mid:AANLkTi=YC52P+Ap27rq8U5x_+dF0xyKoQGUwuULCgsy8@mail.gmail.com"
type="cite">
<div class="gmail_quote">
<div>Anyway, I'm not sure why you think <canvas> is far
better supported than SVG. What browser supports
<canvas> but not SVG?<br>
</div>
</div>
</blockquote>
AFAIK, FF is the only to support SVG FE.<br>
<br>
SVG is a large spec, even SVG Tiny is unevenly implemented.<br>
<br>
WebKit had terribly slow SVG support; IEs was non-existent, though
it was a reasonable task to bring canvas in. I can barely do a nice
thing in SVG on the iPhone. It takes 20 seconds to load a rendering
that takes less than one in canvas. These are the reasons why I
think canvas is better supported. Further, when there are holes,
it's easier to work around them in Canvas than SVG.<br>
<br>
One gaping hole in SVG is repeated elements. I can not reasonably
implement InkML rendering in SVG. I need David Dailey's replicate
tag to do it with any real performance:<br>
<a
href="http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/replicate.htm">http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/replicate.htm</a><br>
<br>
In many ways, SVG has some of the same shortcomings as VML.<br>
<br>
When it comes to the canvas standard, there are a few holes, no
doubt, but they are minor. There are some globalCompositionModes
that aren't touchable, text support needs a backup library for
legacy clients, shadow isn't a reliable module. That's what I work
with.<br>
<br>
Again, I don't see SVG/Canvas as at all exclusive. One is high
level, one is low level, and the high level work takes quite a bit
of work.<br>
<br>
<blockquote
cite="mid:AANLkTi=YC52P+Ap27rq8U5x_+dF0xyKoQGUwuULCgsy8@mail.gmail.com"
type="cite">
<div class="gmail_quote">
<blockquote class="gmail_quote" style="margin: 0pt 0pt 0pt
0.8ex; border-left: 1px solid rgb(204, 204, 204);
padding-left: 1ex;">
<div class="im">
<blockquote class="gmail_quote" style="margin: 0pt 0pt 0pt
0.8ex; border-left: 1px solid rgb(204, 204, 204);
padding-left: 1ex;">
<blockquote class="gmail_quote" style="margin: 0pt 0pt 0pt
0.8ex; border-left: 1px solid rgb(204, 204, 204);
padding-left: 1ex;"> <br>
</blockquote>
Sure, but there are plenty of canvas uses that aren't
animating all the<br>
time (I've seen image editing apps, sites that use canvas
as their<br>
_input_, not their output, etc).<br>
<br>
</blockquote>
</div>
1. Name one.</blockquote>
<div><br>
<a moz-do-not-send="true" href="http://arewefastyet.com">http://arewefastyet.com</a><br>
</div>
</div>
</blockquote>
Uses a second canvas layer for animation.<br>
<blockquote
cite="mid:AANLkTi=YC52P+Ap27rq8U5x_+dF0xyKoQGUwuULCgsy8@mail.gmail.com"
type="cite">
<div class="gmail_quote">
<div><a moz-do-not-send="true"
href="http://www.simile-widgets.org/timeplot/">http://www.simile-widgets.org/timeplot/</a><br>
</div>
</div>
</blockquote>
I don't know what was meant by "sites use canvas as their _input_,
not their output", but anyway, it does fit the challenge.<br>
Here's a case where no Canvas animation happens. The state is
retained, but all the repainting is done by either clicking a link
to go to a new page, or by abusing HTML DIVs.<br>
<br>
It has inefficient use of DOM+HTML. The doc is a lot heavier than it
needs to be. For their code setup, SVG is a better use case. They do
support VML. They're only using Canvas to draw lines, likely for
compatibility reasons. Thus the VML hooks.<br>
<br>
They do keep a state, and setup to plot live data. They don't use
it, they have separate links instead. Turning their "Live Examples"
links into a select element would have made good sense.<br>
<br>
Here's a better implementation of a time plot. Hold shift to
click+drag.<br>
<a class="moz-txt-link-freetext" href="http://timepedia.org/chronoscope/">http://timepedia.org/chronoscope/</a><br>
<br>
Anyway, I agree, you've named an example.<br>
<br>
<blockquote
cite="mid:AANLkTi=YC52P+Ap27rq8U5x_+dF0xyKoQGUwuULCgsy8@mail.gmail.com"
type="cite">
<div class="gmail_quote">
<div><a moz-do-not-send="true"
href="http://jwf.us/blog_apps/mandelbrot_canvas/">http://jwf.us/blog_apps/mandelbrot_canvas/</a><br>
</div>
</div>
</blockquote>
Re-draw button, right there. State vars in private zoom variable. It
outputs to Canvas.<br>
<br>
<blockquote
cite="mid:AANLkTi=YC52P+Ap27rq8U5x_+dF0xyKoQGUwuULCgsy8@mail.gmail.com"
type="cite">
<div class="gmail_quote">
<blockquote class="gmail_quote" style="margin: 0pt 0pt 0pt
0.8ex; border-left: 1px solid rgb(204, 204, 204);
padding-left: 1ex;">Robert's suggestion would radically alter
the existing functionality of canvas</blockquote>
<div><br>
Only in a way that maintains compatibility with existing
content. Otherwise I wouldn't have suggested it.<br>
</div>
</div>
</blockquote>
Existing apps targeting mobile devices (android/iphone) and scaling
for those devices with the pixel ratio / dpi density variables would
be broken. It violates a clearly defined separation of roles with
CSS and Canvas.<br>
<br>
<blockquote
cite="mid:AANLkTi=YC52P+Ap27rq8U5x_+dF0xyKoQGUwuULCgsy8@mail.gmail.com"
type="cite">
<div class="gmail_quote">
<blockquote class="gmail_quote" style="margin: 0pt 0pt 0pt
0.8ex; border-left: 1px solid rgb(204, 204, 204);
padding-left: 1ex;">
and require a whole lot of work from other vendors.<br>
</blockquote>
<div><br>
Not really. <br>
</div>
</div>
</blockquote>
Implement it as an extension, let us know how much time was
involved. It may help other vendors budget their resources.<br>
<br>
I'm very uncomfortable with it being used as the standard behavior
for the existing HTML Canvas element.<br>
<br>
<br>
-Charles<br>
</body>
</html>