JSFiddle - React, Tailwind, and code Playground

by Amit Vishwakarma

HTML

<canvas id="c"></canvas>
<hr/>
<img id="i" hidden />

JavaScript

var i = document.getElementById('i');

i.onload = function(){
    var width = this.naturalWidth,
        height = this.naturalHeight,
        canvas = document.getElementById('c'),
        ctx = canvas.getContext('2d');
    
    canvas.width = Math.floor(width / 2);
    canvas.height = Math.floor(height / 2);
    
    ctx.scale(0.5, 0.5);
    ctx.drawImage(this, 0, 0);
    ctx.rect(0,0,100,100);
    ctx.stroke();
    
    // restore original 1x1 scale
    ctx.scale(5, 1);
    ctx.rect(0,0,100,100);
    ctx.stroke();
};

i.src = 'https://static.md/b70a511140758c63f07b618da5137b5d.png';