firefox take a snapshot from addon side

Question

I'm newbie to addon development and what i want is take a snapshot of specific area of browser[firefox] .so i'm developing Firefox extension for it .i tried lot! now i'm getting error "ctx.drawWindow is not a function". in my addon there is a context menu item named "take a snapshot" .when it is selected i want to take a snapshot

error

console.error: pool:
  Message: TypeError: ctx.drawWindow is not a function

this is my add-on code

main.js

var selection = require("sdk/selection");

var { Ci } = require('chrome');
var utils = require('sdk/window/utils');
var window1 = utils.getMostRecentBrowserWindow();

var contextMenu = require("sdk/context-menu");
 var menuItem = contextMenu.Item({
  label: "take a snapshot",
  context: contextMenu.SelectionContext(),
  contentScript: 'self.on("click", function () {' +
                 '  var cnvs = document.getElementById("myCanvas"); ' +
                 '  var ctx = cnvs.getContext("2d"); '+
                 '  self.postMessage(ctx,cnvs);' +
                 '});',
  onMessage: function (ctx,cnvs) {
    shoot(ctx,cnvs);
  }
});


function shoot(ctx,cnvs){
    console.log("runing");

    var x = 100;
    var y = 100;
    var width = 200;
    var height = 200;
    ctx.drawWindow(window1, x, y, width, height, "rgb(255,255,255)");
    console.log(cnvs.toDataURL());
}

this the HTML page where i test my addon

<canvas id="myCanvas" width="300" height="300"
   style="border:1px solid #000000;">
</canvas>