HTML5 canvas drawImage() function

Question 1

Here’s how to draw from one canvas to another with a 180 degree flip

enter image description here

// save the visibleCtx in it's unrotated state
visibleCtx.save();

// rotate the visible canvas 180 degrees around its centerpoint
visibleCtx.translate(400,300);
visibleCtx.rotate(Math.PI); 
visibleCtx.drawImage(c,-400,-300);

// restore the state of visibleCtx to its unrotated state for future drawings
visibleCtx.restore()

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/2scrB/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:10px;}
    #c{border:3px solid red;}
    #VisibleCanvas{border:3px solid green;}
</style>

<script>
$(function(){

    var c=document.getElementById("c");
    var cCtx=c.getContext("2d");

    var visibleCanvas = document.getElementById("VisibleCanvas");
    var visibleCtx = visibleCanvas.getContext("2d");

    var img=new Image();
    img.onload=function(){

        cCtx.drawImage(img,0,0);

        // note the image being rotated is 400x234
        // so our transformation point is 200x117
        visibleCtx.save()
        visibleCtx.translate(200,117);
        visibleCtx.rotate(Math.PI); 
        visibleCtx.drawImage(c,-200,-117);
        visibleCtx.restore();
    }
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/faces.png";


}); // end $(function(){});
</script>

</head>

<body>
    <p>Offscreen</p>
    <canvas id="c" width=400 height=234></canvas>
    <p>Visible</p>
    <canvas id="VisibleCanvas" width=400 height=234></canvas>
</body>
</html>

Question 2

If I understand the question correctly, you want to:

draw the map on the hidden canvas;
rotate the visible canvas; and
copy the map from the hidden canvas to the visible canvas?

Assuming your visible canvas has width=800 and height=600 ...

var visibleCanvas = document.getElementById("VisibleCanvas");
var visibleCtx = visibleCanvas.getContext("2d");
visibleCtx.translate(400,300);
visibleCtx.rotate(Math.PI);

Return the canvas coordinate grid to its original position

visibleCtx.translate(-400,-300);

The drawImage command has the format:

destinationContext.drawImage(sourceElement, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);

... thus "visibleCtx.drawImage(c,-400,-300,800,600);" is telling the canvas to copy the source using coordinates (-400,-300) - which falls outside of the hidden canvas.

Instead, use this:

visibleCtx.drawImage(c,0,0,800,600);

Because the visible canvas coordinate system origin point has been set back to the top left hand corner, and you don't want to resize the copied image, you don't need to worry about the destination values.