Home › Blogs › pulsar's blog

Using a Canvas Element in XUL / Mozilla-Extensions

Fri, 11/27/2009 - 20:36 — pulsar

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

Your rating: None Average: 5 (1 vote)