JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="400" height="400" id="cv"></canvas>
<br>
Original:
<br>
<img>

JavaScript

var cv = $("#cv").get(0),
    ctx = cv.getContext("2d");

// paint 200x200 image with resolution 50x50
var w = 200,
    h = 200,
    p = 50,
    q = 50;

var img = $("img").get(0);

img.onload = function() {
    cv.width = p;
    cv.height = q;
    
    ctx.drawImage(img, 0, 0, p, q);
    
    cv.style.width = w + "px";
    cv.style.height = h + "px";
};

img.src = "http://www.lorempixum.com/300/300/";