How do I use the canvas drawWindow function in an addon created using the addon sdk?

Question

I've create a Firefox addon using the addon sdk. I'm trying to use the canvas drawWindow function.

I've got the following code to use the function, where ctx refers to a canvas context, that I got with canvas.getContext("2d").

ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");

When I run this code, within a script that is attached using

tabs.activeTab.attach({
    contentScriptFile: data.url("app.js") // app.js contains the above line of code
});

I get the following error:

TypeError: ctx.drawWindow is not a function

This error does not occur when I call functions like strokeRect and fillRect on the same ctx object.

The docs on this page says you need chrome privileges to use the code, so that may be issue. I would expect a different error, based on the code for the function.

I found out that I can chrome privileges in my addon using this, but what would I do next to use ctx.drawWindow?

Also, when I ran the code in this question, from a scratchpad on a page, rather than from an addon, rather than a "Error: The operation is insecure", I get the same "Exception: ctx.drawWindow is not a function".

So, basically what I'm asking is, how would I go about use canvas drawWindow in addon created using the addon sdk?

Edit: I'm trying to do this because I need a method to access individual pixels of the rendered page. I'm hoping to draw the page to canvas, then access the pixel using getImageData. If there are other methods of doing accessing individual pixels (in an Firefox addon), that would be helpful too.

Answer 1

Here's a code snippet, borrowed from the old tab-browser module of the SDK. This will get you a thumbnail of the current tab without attaching to the tab itself.

var window = require('sdk/window/utils').getMostRecentBrowserWindow();
var tab = require('sdk/tabs/utils').getActiveTab(window);
var thumbnail = window.document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
thumbnail.mozOpaque = true;
window = tab.linkedBrowser.contentWindow;
thumbnail.width = Math.ceil(window.screen.availWidth / 5.75);
var aspectRatio = 0.5625; // 16:9
thumbnail.height = Math.round(thumbnail.width * aspectRatio);
var ctx = thumbnail.getContext("2d");
var snippetWidth = window.innerWidth * .6;
var scale = thumbnail.width / snippetWidth;
ctx.scale(scale, scale);
ctx.drawWindow(window, window.scrollX, window.scrollY, snippetWidth, snippetWidth * aspectRatio, "rgb(255,255,255)");
// thumbnail now represents a thumbnail of the tab
console.log(thumbnail.toDataURL());

From here you should be able to grab the data via getImageData and just ignore the scaling parts if you don't want that.