JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>

JavaScript

var height = 375,
    width = 750;

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = width;
canvas.height = height;

var context = canvas.getContext('2d');

var projection = d3.geo.equirectangular()
    .translate([width/2, height/2])
    .scale(100); //CHANGE TO 80 FOR ERROR
var path = d3.geo.path().projection(projection);

var image = new Image();
image.crossOrigin = 'anonymous';
image.src = 'http://i.imgur.com/6oUa1eg.jpg';
image.onload = function () {
    var dx = width,
        dy = height;

    context.drawImage(image, 0, 0, dx, dy);

    var sourceData = context.getImageData(0, 0, dx, dy).data,
        target = context.createImageData(dx, dy),
        targetData = target.data;

    for (var y = 0, i = -1; y < dy; ++y) {
	        for (var x = 0; x < dx; ++x) {
	            var p = projection.invert([x, y]);
	            if (!p) {
	            	targetData[++i] = 0;
	            	targetData[++i] = 0;
	            	targetData[++i] = 0;
	            	targetData[++i] = 0;
	            	continue;
	            }
	            var λ = p[0],
	                φ = p[1];
	            if (λ > 180 || λ < -180 || φ > 90 || φ < -90) {
	                i += 4;
	                continue;
	            }
	            var q = ((90 - φ) / 180 * dy | 0) * dx + ((180 + λ) / 360 * dx | 0) << 2;
	            targetData[++i] = sourceData[q];
	            targetData[++i] = sourceData[++q];
	            targetData[++i] = sourceData[++q];
	            targetData[++i] = 255;
	        }
	    }

    context.clearRect(0, 0, width, height);
    context.putImageData(target, 0, 0);
}