Using a Canvas Element in XUL / Mozilla-Extensions

It's actually pretty simple, but many small things can go wrong. So, here is your small boilerplate code for a XUL overlay which renders a small canvas area in the status bar:

  1. <?xml version="1.0"?>
  2.  
  3. <overlay id="myOverlay"
  4. xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  5. xmlns:html="http://www.w3.org/1999/xhtml">
  6.  
  7. <statusbar id="status-bar">
  8. <statusbarpanel>
  9. <box>
  10. <html:canvas id="myCanvas" width="15" height="15" style="border:1px solid black;"/>
  11. </box>
  12. </statusbarpanel>
  13. </statusbar>
  14. </overlay>

and some simple painting in JS:

  1. var canvas = window.document.getElementById("myCanvas");
  2. var ctx = canvas.getContext("2d");
  3. ctx.fillStyle = "red";
  4. ctx.fillRect(5,5,5,5);

If done right, you will get a result like this

CANVAS in XULCANVAS in XUL