how to create canvas in content document from firefox extension?

I'm developing a firefox extension, so that i can create canvas elements in the content document (webpage loaded in the browser) from the extension.

My function is below:

function createCanvas(el, e, count)
{
    try{
    alert("create canvas");
    var x = getImgOffset(el).left;
    var y = getImgOffset(el).top;
    var body = window.content.document.getElementsByTagName('body')[0];
    //removeSelection();
    var canvas = {};
    canvas.node = window.content.document.createElement('canvas');
    canvas.context = canvas.node.getContext('2d');
    canvas.node.setAttribute('id','canvas');
    canvas.node.setAttribute('height',el.offsetHeight+'px');
    canvas.node.setAttribute('width',el.offsetWidth+'px');
    canvas.node.setAttribute('style','left:'+x+';top:'+y+';border: 1px solid grey; position:absolute; z-index:2;');
    body.appendChild(canvas.node);
    alert("d");
    canvas.node.onmouseover = function(event){ 
        var t = (event && event.target) || (event && event.srcElement); 
        //alert("d : "+t.tagName);
        initCanvas(even开发者_StackOverflow中文版t);
    }
    initCanvas(e);
    }catch(er)
    {
        alert("crt canvas : "+er.name+"\n"+er.message);
    }
}

This code is working when I call the function from inside the webpage. But, it is throwing an exception when I tried to call this function createCanvas from the toolbar.

I'm getting error in the following line:

canvas.node = window.content.document.createElement('canvas');

I've tried the following lines also:

canvas.node = window.content.document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas');

&

canvas.node = window.content.document.createElementNS('http://www.w3.org/1999/xhtml', 'html:canvas');

But still getting the same error:

Error Name:  NS_ERROR_NOT_AVAILABLE
Error Message: Component is not available

Please help me in this issue.

---

Why not just add an html:canvas element in your overlay.xul:

    <html:canvas id="my-canvas" style="display: none;" />

and then reference it by id in your javascript:

    var canvas = document.getElementById('my-canvas');

I've blogged about how to use canvas elements to let browser extensions take screenshots.