Drawing an Image to the Canvas

by Thanos Saringelos

HTML

<canvas id="c" width="320" height="190"></canvas>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">

CSS

body {
  background: #CEF;
}

#c {
  background: #000000;
  border:3px solid yellow;
}

JavaScript

// Grab the Canvas and Drawing Context
 var canvas = document.getElementById('c');
 var ctx = canvas.getContext('2d');

 // Create an image element
 var img = document.createElement('IMG');

 // When the image is loaded, draw it
 img.onload = function() {
   var handCanvDrawParams = calcDrawImageParams({
     sourceWidth: 546,
     sourceHeight: 400,
     displayWidth: canvas.width,
     displayHeight: canvas.height
   });
   console.log(handCanvDrawParams)
   console.log('image w :' + this.width)
   console.log('canvas w : ' + canvas.width)
   ctx.drawImage(
     img,
     handCanvDrawParams.sourceX,
     handCanvDrawParams.sourceY,
     handCanvDrawParams.sourceWidth,
     handCanvDrawParams.sourceHeight,
     handCanvDrawParams.destX,
     handCanvDrawParams.destY,
     handCanvDrawParams.destWidth,
     handCanvDrawParams.destHeight
   );
 }

 // Specify the src to load the image
 img.src = "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg";

 function calcDrawImageParams(params) {

   var displayAspect = params.displayWidth / params.displayHeight;
   var sourceAspect = params.sourceWidth / params.sourceHeight;

   var heightRatio = params.displayHeight / params.sourceHeight;
   var widthRatio = params.displayWidth / params.sourceWidth;

   var sx = 0;
   var sy = 0;
   var swidth = 0;
   var sheight = 0;
   var x = 0;
   var y = 0;

   var widthDiff = 0;
   var heightDiff = 0;

   var clientAspectRatio = params.displayWidth / params.displayHeight;

   if (sourceAspect > displayAspect) {
     var correctWidth = clientAspectRatio * params.sourceHeight;
     widthDiff = params.sourceWidth - correctWidth;
   } else if (sourceAspect < displayAspect) {

     var correctHeight = params.sourceWidth / clientAspectRatio;
     heightDiff = params.sourceHeight - correctHeight;
   }

   return {
     sourceX: widthDiff / 2,
     sourceY: heightDiff / 2,
     sourceWidth: params.sourceWidth - widthDiff,
     sourceHeight: params.sourceHeight -...