Resize in steps

by vpetrychuk

HTML

<button data-resize>Resize</button><br />
<canvas data-canvas></canvas>
<img src="http://i.imgur.com/SHo6Fub.jpg" hidden alt="" />

JavaScript

var canvas = document.querySelector('[data-canvas]');
var ctx = canvas.getContext('2d');
var resizeCanvas = function () {
    var img = new Image();
    img.onload = function () {
        var ratio = Math.random();
        canvas.width = ratio * img.width;
        canvas.height = ratio * img.height;
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    }
    img.src = "http://i.imgur.com/SHo6Fub.jpg";
};

$('[data-resize]').on('click', resizeCanvas);
resizeCanvas();