Anne van Kesteren

Opera and canvas (again)

Did some posting about this before. We have some known bugs that are being worked upon. For example, the technical preview of Opera 9 only accepts rgba() color values and no rgb(). Images (HTMLImageElement) which were previously not drawn on the screen can not be used as argument for the drawImage method. (For example, img { display:none } would cause this.) This is the reason some textures don’t work in a popular shooter. Initially the map there didn’t work well either, but that was actually because of a bug in Firefox. See fill/stroke shouldn’t destroy path. As people do not really develop against a specification, but against an implementation (only logical thing to do) Opera got their share of invalid bug reports. (This works both ways.)

Let me also point out that canvas was not some Firefox invention. It came from Apple, mostly for Dashboard. Not that anyone agreed on this extension. Especially the way it was done created some controversy. Some people, including Sjoerd, proposed to drop the element and keep the API. Made sense to some people on the WHATWG list, including me, but Mozilla developers chose to be compatible with Apple (with the exception of adding a mandatory closing tag; thank god). Opera had an implementation similar to Apple internally.

On yet another point: It seems to me that people play a lot more with canvas than they play with SVG. I have the feeling that it is because it is not declarative and therefore probably easier to use. And you can use it in text/html documents. Incremental innovation is key.

Back to the first paragraph. When playing with initial implementations you should be aware that it might very well have bugs. And that what works in the browser might very well not work in another or a newer version of it. That this utopia does not really work was shown over the years by people coding against Internet Explorer. top:50 all over the place. Fortunately new browsers (including newer versions of Internet Explorer) can cover that with quirks mode. Hurray for interoperability.

Comments

  1. Anne, I agree with you that incremental improvements are the key. It's possible to reference SVG documents from text/html easy enough using the <object> tag, but interaction between the DOMs is tricky (or impossible) in today's world. Also cool SVG/HTML integration like 'background-image' are, unfortunately, not yet supported anywhere :(

    Posted by Jeff Schiller at

  2. window.parent does not work? And contentDocument should work on HTMLObjectElement. If these are things that do not work in Opera please tell me. We will get to that. (If you find anything else in Opera you can e-mail me too, by the way.)

    Regarding background (and list-style and html:img), the problem is that SVG is a document format and not an image format.

    Posted by Anne at

  3. Let me also point out that canvas was not some Firefox invention. It came from Apple, mostly for Dashboard. Not that anyone agreed on this extension. Especially the way it was done created some controversy.

    Yep, which is exactly why it shouldn't be available to the web, but only for what it was intented for: Dashboard

    I can't help feeling this is gonna be another DHTML type fiasco...*sigh*

    Or maybe I'm just getting grumpy, who knows ;)

    Posted by James / AkaXakA at

  4. Regarding background (and list-style and html:img), the problem is that SVG is a document format and not an image format.

    But this shouldn't stop SVG from being used in CSS. Imagine how nice it would be to have a scalable background image that fits with the screen, not matter what size it is. Using SVG in HTML makes it "less scalable", as the width and height attribute of the object or img element is measured in Length (pixel or percentage). And object element should be used for data images, not presentational images.

    Posted by minghong at

  5. Imagine how nice it would be to have a scalable background image that fits with the screen, not matter what size it is.

    Hint: think z-index.

    Posted by Jacques Distler at

  6. but Mozilla developers chose to be compatible with Apple

    This makes me sad... :(

    It seems to me that people play a lot more with canvas than they play with SVG.

    Because they completely fudged SVG! They spent all their time trying to devise a Flash replacement, they forgot they were suppose to be designing a language for Scalable Vector Graphics. Where's my stroke-position you pillocks!

    They didn't reuse other specs. They changed property names. They made it difficult to use CSS. I'm doing my best to work with it, but the fact that I can't create a simple vector image and manipulate it through the DOM pisses me off to no end.

    Posted by hemebond at

  7. I can't help feeling this is gonna be another DHTML type fiasco...*sigh*

    Or maybe I'm just getting grumpy, who knows ;)

    You're just being grumpy.

    Posted by Arve at

  8. Anne, I was specifically referring to cross-browser environments, not specific to Opera. At this point, it's meaningless to code only for Opera so it has to work in both Mozilla and in IE+ASV...

    As for background-image, I want rounded corners in my HTML divs, and SVG seems to be a great solution...

    Posted by Jeff Schiller at

  9. ...the fact that I can't create a simple vector image and manipulate it through the DOM pisses me off to no end.

    I had no problems with that.

    Posted by Sjoerd Visscher at

  10. Where's my stroke-position you pillocks!

    I'm probably the ignorant one here, but what would stroke-position do? Determine how much of the stroke overlaps the fill? Though it may not be convenient, any special type of stroke could be done as a path around an unstroked shape, right? I guess I fail to understand the scope of things missing in SVG...

    Posted by Jeff Schiller at

  11. I had no problems with that.

    Well, I don't get to work in purely SVG documents. All I remember is trying to move an image (the whole image) when clicked and dragged on with the mouse, I guess I just didn't understand it well enough.

    what would stroke-position do? Determine how much of the stroke overlaps the fill?

    Exactly

    Determine how much of the stroke overlaps the fill? Though it may not be convenient, any special type of stroke could be done as a path around an unstroked shape, right?

    You're right, it's not convenient. I'm pulling data from the database and I don't want to have to pollute my data for an outline.

    Posted by hemebond at

  12. I wanted to mention to folks here if they are interested in talking with other folks who are playing with canvas that there is a new "canvas-developers" mailing list - similar to the "svg-developers" list I created back in '99.

    http://groups.yahoo.com/group/canvas-developers/

    Posted by Andrew Wooldridge at