Resize in steps

by Anov Siradj

HTML

<img src="http://ngulik.co/wp-content/uploads/2013/11/Foto-Kinal-JKT48-cool.jpg" width="300" height="234">
<canvas id="canvas" width=200></canvas>
<!--
form: http://stackoverflow.com/questions/19262141/resize-image-with-javascript-canvas-smoothly
orig: http://jsfiddle.net/AbdiasSoftware/v8app/
-->

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

img = new Image();
img.onload = function () {

    canvas.height = canvas.width * (img.height / img.width);

    /// step 1
    var oc = document.createElement('canvas'),
        octx = oc.getContext('2d');

    oc.width = img.width * 0.7;
    oc.height = img.height * 0.7;
    octx.drawImage(img, 0, 0, oc.width, oc.height);

    /// step 2
    octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);

    ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
    0, 0, canvas.width, canvas.height);
}
img.src = "http://ngulik.co/wp-content/uploads/2013/11/Foto-Kinal-JKT48-cool.jpg";