Javascript 如何打印应用了内联样式的html5画布？

我正在通过javascript创建多个画布对象。我应用了一些内联样式，比如背景颜色、背景图像、旋转、缩放、对象顶部、左侧等变换

例如：

function draw(image,flag) {
    image = image.get(0);
    can_cnt = $("#canvases").children('canvas').length;
    $("#canvases").append('<canvas id="case_canvas'+can_cnt+'" data-type="image" width="301" height="501" align="center" style="position: absolute; left: 0px; top: 0px; border:0px solid transparent; z-index:-1; "></canvas>');
    var ctx = document.getElementById('case_canvas'+can_cnt).getContext('2d');
    if(flag) {
        ctx.drawImage(image,0,0,image.height,image.width);
    } else {
        ctx.drawImage(image,startX,startY,200,200);
    }
}

通过这种方法，我添加了多个画布，并根据需要在其上应用样式

现在，我希望所有画布对象都在一个图像中。我试过很多方法，比如

$("#temp_canvas_div").html('<canvas id="temp_canvas" width="301" height="501" align="center" >');
        can1 = document.getElementById('temp_canvas');
        ctx1 = can1.getContext("2d");
        $("#canvases canvas").each(function() {

            var coll = document.getElementById($(this).attr('ID'));

            var el = document.getElementById($(this).attr('ID'));
            var st = window.getComputedStyle(el, null);

            var tr = st.getPropertyValue("-webkit-transform") ||
            st.getPropertyValue("-moz-transform") ||
            st.getPropertyValue("-ms-transform") ||
            st.getPropertyValue("-o-transform") ||
            st.getPropertyValue("transform") ||
            "FAIL";

            // rotation matrix - http://en.wikipedia.org/wiki/Rotation_matrix
            var a = 0;
            var b = 0;
            if(tr != 'none') {
                var values = tr.split('(')[1].split(')')[0].split(',');
                var a = values[0];
                var b = values[1];
                var c = values[2];
                var d = values[3];
            }

            var scale = Math.sqrt(a*a + b*b) ?  Math.sqrt(a*a + b*b) : 1;

            var h = (500 * scale)
            var w = (300 * scale)

            var x = parseInt((300 - w) / 2);
            var y = parseInt((500 - h) / 2);

            var sx = 0;
            var sy = 0;
            if(parseInt($("#"+$(this).attr('ID')).css('left')) != 0) {
                sx = x + parseInt($("#"+$(this).attr('ID')).css('left'));
            }

            if(parseInt($("#"+$(this).attr('ID')).css('top')) != 0) {
                sy = y + parseInt($("#"+$(this).attr('ID')).css('top'));
            }

            sx = sx != x ? sx : x;
            sy = sy != y ? sy : y;

            ctx1.drawImage(coll, sx, sy, 300,500, x,y,w,h);
        });
        window.open(temp_canvas.toDataURL("image/png"));

但我无法获得屏幕上显示的准确图像

是否有任何方法将所有画布打印到一个图像或画布上，并应用其当前样式

谢谢