JSFiddle - React, Tailwind, and code Playground

by icodeforlove

JavaScript

var image = new Image();
image.addEventListener('load', function () {
    var buffer = document.createElement('canvas');
    buffer.context = buffer.getContext('2d');
    
    var canvas = document.createElement('canvas');
    canvas.context = canvas.getContext('2d');
    
    buffer.width = image.width;
    buffer.height = image.height;
    
/*
    reduction
    .80
    .80 / 2
    .80 / 8
*/
    
    buffer.context.drawImage(image, 0, 0, image.width, image.height, 0, 0, buffer.width, buffer.height);

    buffer.context.drawImage(buffer, 0, 0, buffer.width, buffer.height, 0, 0, buffer.width / 2, buffer.height / 2);    

    buffer.context.drawImage(buffer, 0, 0, buffer.width, buffer.height, 0, 0, buffer.width / 2, buffer.height / 2);

    buffer.context.drawImage(buffer, 0, 0, buffer.width, buffer.height, 0, 0, buffer.width / 2, buffer.height / 2);    

    canvas.width = image.width/2/2/2;
    canvas.height = image.height/2/2/2;
    canvas.context.drawImage(buffer, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);  

    document.body.appendChild(canvas);
});
image.src = 'http://cdn.img42.com/55f4001ad8dcd4a1bae9c1b87f65d74f.jpeg';

var image = new Image();
image.addEventListener('load', function () {
    var buffer = document.createElement('canvas');
    buffer.context = buffer.getContext('2d');
    
    var canvas = document.createElement('canvas');
    canvas.context = canvas.getContext('2d');
    
    buffer.width = image.width;
    buffer.height = image.height;
    
    buffer.context.drawImage(image, 0, 0, image.width, image.height, 0, 0, buffer.width / 8, buffer.height / 8);

    canvas.width = image.width/8;
    canvas.height = image.height/8;
    canvas.context.drawImage(buffer, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);  

    document.body.appendChild(canvas);
});
image.src = 'http://cdn.img42.com/55f4001ad8dcd4a1bae9c1b87f65d74f.jpeg';