JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<canvas width="300" height="450"></canvas>

CSS

body {
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
}

JavaScript

$(document).ready(function() {
    var image = new Image();
    image.onload = function() {
        var width = image.width,
            height = image.height;
        var context = $("canvas")[0].getContext("2d");
        for (var i = 0; i <= height / 2; ++i) {
            context.setTransform(1, -0.4 * i / height,
                0, 1, 0, 60);
            context.drawImage(image,
                0, height / 2 - i, width, 2,
                0, height / 2 - i, width, 2);
            context.setTransform(1, 0.4 * i / height,
                0, 1, 0, 60);
            context.drawImage(image,
                0, height / 2 + i, width, 2,
                0, height / 2 + i, width, 2);
        }
    };
    image.src = "http://upload.wikimedia.org/wikipedia/en/1/19/OBTN.jpg";
});