(2) - StackOverflow_17377952: How to re-size canvas and draw image on canvas as perspective window size

Illustration of answer to: http://stackoverflow.com/questions/17377952/how-to-re-size-canvas-and-draw-image-on-canvas-as-perspective-window-size

by Gustavo Carvalho

HTML

<div id="container">
    <canvas id="canvas" width=210 height=261></canvas>
</div>

CSS

body {
    background-color: ivory;
    margin:0;
    overflow:hidden;
}
canvas {
    border:1px solid red;
}
#container {
    position: absolute;
    left: 50%;
    top: 50%;
}
#canvas {
    width: 100%;
    height: 100%;
}

JavaScript

var container = document.getElementById('container');
   var canvas = document.getElementById('canvas');
   var context = canvas.getContext('2d');

   // this function fill an image on canvas
   function drawImage(image) {
       context.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
   }

   var imageObj = new Image();
   imageObj.onload = function () {
       drawImage(this);
   };
   imageObj.src = "https://dl.dropboxusercontent.com/u/37981960/images/stackoverflow/wally.jpg";

   // set this to false to maintain the canvas aspect ratio, or true otherwise
   var stretch_to_fit = false;

   function resize() {
       // aspect ratio
       var widthToHeight = canvas.width / canvas.height;
       var newWidthToHeight = widthToHeight;

       // cache the window dimensions (discount the border)
       var newWidth = window.innerWidth,
           newHeight = window.innerHeight;

       if (stretch_to_fit) {
           // overwrite the current canvas aspect ratio to fit the entire screen
           widthToHeight = window.innerWidth / window.innerHeight;
       } else {
           newWidthToHeight = newWidth / newHeight;
       }


       // scale the container using CSS		
       if (newWidthToHeight > widthToHeight) {
           newWidth = newHeight * widthToHeight;
           container.style.height = newHeight + 'px';
           container.style.width = newWidth + 'px';
       } else {
           newHeight = newWidth / widthToHeight;
           container.style.width = newWidth + 'px';
           container.style.height = newHeight + 'px';
       }

       // adjust the container position 
       // (a visual sugar that centralises the canvas on result page)
       container.style.marginTop = (-newHeight / 2) + 'px';
       container.style.marginLeft = (-newWidth / 2) + 'px';

   };

   // listen to resize events
   window.addEventListener('resize', function () {
       resize();
   }, false);

   // also resize the screen on...