Canvas Perspective Image

by Adi Jaya

HTML

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

<h2>Original</h2>
<p>
<img alt="demo" src="https://4.bp.blogspot.com/-D2bmsN8rMF8/V4KDcQ3wRjI/AAAAAAAAAXU/J8cQUS-Pe8MOSgCIMlYcfQoa6r91sh7XQCLcB/w250-h125-p-k-no-nu/Trik%2BSonic.png"/>
</p>

CSS

canvas {
  display: block;
  margin: 0 auto;
  border: 1px solid silver;
}

JavaScript

var canvas = document.getElementById( "canvas" );
    var image = new Image();
    image.onload = function() {
        var width = image.width,
            height = image.height;
        var context = canvas.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 = "https://4.bp.blogspot.com/-D2bmsN8rMF8/V4KDcQ3wRjI/AAAAAAAAAXU/J8cQUS-Pe8MOSgCIMlYcfQoa6r91sh7XQCLcB/w250-h125-p-k-no-nu/Trik%2BSonic.png";