JSFiddle - React, Tailwind, and code Playground

by rajeshpillai

HTML

<canvas id="mycanvas" width="600" height="600"></canvas>

JavaScript

var c = document.getElementById('mycanvas');
var ctx = c.getContext('2d');
var img = new Image();
img.onload = function () {
  //ctx.drawImage(img, 0, 0, 300, 200); // resizes image to 300px wide, 200px high
  //ctx.drawImage(img, 300, 0, 300, img.height * (300/img.width));
  ctx.drawImage(img, 0, 0, img.width, img.height,     // source rectangle
                   0, 0, c.width-400, c.height * (c.width-400)/img.width); // destination rectangle
}
img.src = 'http://sanjaal.com/imagehost/image-B340_4AC0ECE3.jpg';