XUL Clippings – Canvas

Here are some XUL clippings that show different uses of the <canvas> element. The purpose of this post is not to show off uses of <canvas>, but to point out that it can be used in XUL (Firefox extensions and XULRunner applications) very easily.

I also updated the XUL/E (XUL in IE) post to include some of these samples as well. That’s right, you can use <canvas> in IE using the Mozilla ActiveX control discussed in the post.

Note: These are simply XUL files and if you’re using Firefox (or another XUL enabled browser), clicking the links will open the files in the browser instead of downloading to your machine. Right-click on the links and pick “Save Link As…” to save them to your machine.

7 Comments

  1. sam said,

    January 2, 2007 @ 11:18 am

    Wow! Reminds me of those cheesy Flash clocks that people put on their sites. That one is all text and can actually work on any platform.

  2. Asrail said,

    January 2, 2007 @ 4:25 pm

    Is there any reason I can view XUL apps and canvas images in my build, but I can’t see your examples?

    I can see the browser in the thumbnail example, but I can’t see the canvas.
    If I click save it says:
    “not implemented in XULRunner 1.8.0.4″, but I’m running:
    Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9a2pre) Gecko/20061230 SeaMonkey/1.5a

    I can’t write lines neither see the clock.

  3. Mark Finkle said,

    January 2, 2007 @ 5:38 pm

    sam – I know it won’t win any awards. Just showing it can be done.

    Asrail – There seems to be a problem with “canvas” in the 1.9a release. It also fails for me in the 1.9a XULRunner release.

  4. Ted Mielczarek said,

    January 2, 2007 @ 7:28 pm

    Someone on #developers thought that the canvas-in-xul not working might be bug 364014.

  5. sam said,

    January 6, 2007 @ 1:58 pm

    I wasn’t being sarcastic, if that’s what you thought. The examples are genuinely amazing. Flash stuff will only work on whatever platform Adobe chooses to support, but this could work anywhere.

  6. wildweed said,

    January 17, 2007 @ 11:04 am

    Hi~ . I’m concerned about your “canvas-in-xul-thumbnails.xul” source.

    I ran successfully two sources that are “canvas-in-xul-clock.xul” “canvas-in-xul-scribbler.xul”

    but I couldn’t run “canvas-in-xul-thumbnails.xul”.

    I dragged and drop my “firefox-2.0″. And I saw two tabs that are ‘browser’ and ‘canvas’.

    ‘browser’ tab is good. But Its URL bar didnt run(I pressed key that is URL address and ;.. click [GO], but didnt work.

    ‘Canvas’ button didnt show screen. Just white.

    Update didnt work. After clicked SAVE button , [not implemented in XULRunner 1.8.0.4]

    I’ll wait your response.

    thanks ..

    ps . I’m not English native speaker.. So I’m not good well English.. sorry

  7. Mark Finkle said,

    January 17, 2007 @ 12:02 pm

    wildweed – As I state in the post, you can only test that example if you run it from an extension or XUL Explorer (as a separate window). The code uses a method “drawWindow” which cannot be used from web content.

RSS feed for comments on this post