I've been thinking a bit over the last week or so about support for custom drawing widgets in Mozilla. There are four possibilities:

  • Create a <canvas> tag as described in bug 102285. Although the patch needs some work, this is probably the easiest approach. However, it limits one to a single special XUL tag for drawing.
  • Create a modifiable image object. The image would have a variety of drawing functions such as drawLine, drawRect and so forth as well as pixel-level functions. It might even be possible to support transparency and animation as existing images do. It could then be used in the HTML and XUL image tags, or even CSS properties if a method was created to assign custom images to them. The canvas tag patch suggests that this technique would be quite simple to implement. It has the advantage that it could work on various different tags.
  • Create an interface with drawing functions. These would be called by the application during paint events (such as onpaint) to update the display. This would have the advantage of not necessarily requiring a buffer to hold image data, but would be slower for repeated redraws. It would however, allow extra components to implement the drawing interface, allowing for various alternate system-specific libraries to handle drawing.
  • Use SVG. This is the most work, but only really handles some cases. SVG requires a DOM node for every part of what is to be drawn, which isn't practical for pixel-level drawing or heavy animation.

There's also some security issues, for example, to ensure that unprivileged code either can't use custom drawing, or can't draw over things it shouldn't be able to.