guillotine to canvas

gistfile1.js

var data = $('#sample_picture').guillotine('getData');

var pic = $('#sample_picture').get(0);
var canvas = $('canvas').get(0);
if (!canvas) {
    $('body').append('<canvas/>')
    canvas = $('canvas').get(0);
}
var src = pic.src;
var newPic = new Image();
newPic.src = src;

$(canvas).css({ margin: 'auto'})

var guillotineWin = $('.guillotine-window');
var bcr = guillotineWin.get(0).getBoundingClientRect();
var gww = bcr.width;
var gwh = bcr.height;

canvas.width = gww;
canvas.height = gwh;

var ctx = canvas.getContext('2d');

$(canvas).css({ border: 'red 1px solid'})
console.log(pic.src)
newPic.onload = function () {

    var scale = data.scale;
    var sx = -data.x;
    var sy = -data.y;
    var sw = data.w*scale;
    var sh = data.h*scale;
    var w = newPic.width * scale;
    var h = newPic.height * scale;
    var x = 0;
    var y = 0;

    console.log({
        scale: scale,
        sx: sx,
        sy: sy,
        sw: sw,
        sh: sh,
        w: w,
        h: h,
        x: x,
        y: y
    });

    ctx.clearRect(0,0,gww,gwh);
    ctx.drawImage(newPic, 0, 0, gww, gwh, 0, 0, w, h);
}