JSFiddle - React, Tailwind, and code Playground

by shegby

HTML

<img src="http://afriendinparis.com/wp-content/uploads/2015/06/Vue_Paris.jpg" width=235><br>
<canvas id="canvas"></canvas>

JavaScript

let elem = document.getElementById("canvas")
let ctx = elem.getContext('2d')
let pic = new Image()
pic.src = "http://afriendinparis.com/wp-content/uploads/2015/06/Vue_Paris.jpg"
let k = (pic.width/pic.height)/15
let width = (pic.width*k).toFixed(0),
    height = (pic.height*k).toFixed(0)
pic.onload = function() {
  /* ctx.imageSmoothingEnabled = false; */
  ctx.drawImage(pic, 0, 0, width, height);
}