I think 2D graphics are a lot of fun, and have always loved the Java2D API. How cool is it, then, that Safari includes and Firefox 1.5 will include a new <canvas> tag that exposes a drawing API very, very similar to the Java2D API?
The canvas tag has the potential to revolutionize a lot of web applications. But for this to happen, it needs to be ported to browsers other than Safari and Firefox 1.5. I'm sure it can be done for IE, somehow, but I don't want to tackle that right now.
Instead, my contribution is to begin implementing the canvas tag for Firefox 1.0 using a Java applet and Mozilla's XBL binding language. This is just at proof-of-concept stage, but it is usable enough to make simple demos work. The java applet and XBL files are here. The canvas.html file in that directory is a simple demo. It doesn't seem to work online, but if you copy the files to a local directory, it should work. (I suspect, but don't know, that XBL bindings have to be installed locally to work for security reasons.)
To use this, compile the .java file to a .class file. Then define a simple stylesheet that tells Firefox to use the canvas.xbl file to implement the canvas tag. This is what I use:
<style>
canvas {
-moz-binding: url('canvas.xbl#canvas');
display:block;
}
</style>
Anyone want to take over work on this? You need to know Java and JavaScript, and know more about XBL than I do. And if you know something about whatever IE uses instead of XBL, that would be a big help, too... Drop me a line if you're interested!
IE uses HTC/Behavior instead of XBL.
Novell has a binary behavior that implements the canvas. It is part of their XForms for IE implementation.
David! Well done! Interesting project.
I have also been really interested to see 2D capabilities coming to web browsers. In fact, I have developed a web-2D api of my own. But it executes on the server, not on the client:
http://www.ditchnet.org/2d
It's a JSP taglib that provides a <canvas> tag upon which you can use JavaScript (thanks to Rhino) to script the Java 2D API to render graphics 'directly' on the web page.
Oh, and I've really enjoyed your books I've read. Thanks. ;)
Dean Edwards has built a compatibility layer that can convert (i.e. utilize) HTC behaviors to XBL on-the-fly.
http://dean.edwards.name/moz-behaviors/
I'm not aware of any software that goes the other direction, but basically it seems feasable to develop an abstraction layer that can be used both as a HTC and XBL.
David, XBL should work from web too. Only guess - rename canvas.xbl to canvas.xml so it have text/xml MIME type.
There are plenty of examples here that suggest that an IE implementation is more than possible:
http://www.dhteumeuleu.com/
From the xbl:
<!-- need to modify this somehow. As it is, the binding doesn't work if the tag has any content, including space -->
You can fix this by including a <children/> tag after the applet in the binding content. XBL freaks out if it can't figure out where to attach all of the DOM nodes from the original document in the resulting anonymous fragment.
Another issue: You draw to the tag after document.onload, but the applet isn't guaranteed to be able to accept calls from the javascript methods until after the applet is loaded, which may occur later.
Unfortunately, I can't think of a correct way to block those calls until the applet loads because some of the methods are designed to give a synchronous reply and you can't block until the java applet is loaded, because of you only have the one thread in javascript.
You could get fancy and xbl:inherit the onload attribute from the canvas to the applet so that <canvas onload=...> would work, and implement a <method/> for add/remove EventListener that forwards the calls to the applet, but the semantics are a little different than just triggering off of the load of the document, not consistent with other tags, and not very clean. =(
Nice proof of concept though!