javascript - Using D3.js to convert map projections on canvas -

what i'm doing:

i have way upload image onto canvas. then, i'm using d3's map projections allow selection of different map projection convert image to.

the problem:

the conversion works if original image equirectangular projection. example, if upload equirectangular earth map, tell convert robinson projection, works fine. if upload robinson map image, try convert equirectangular projection, fill in transparent data color (i.e. doesn't work).

the code i'm using:

function updatemapprojection(selection) {     var projection = options[selection.selectedindex].projection;     //projection var 'd3.geo.robinson()`     var projcanvas = document.getelementbyid('projectioncanvas');     var projctx = projcanvas.getcontext('2d');     projctx.clearrect(0, 0, projcanvas.width, projcanvas.height);     var tempimage = new image();     if (mapfile.indexof("imgur.com") > -1) {         tempimage.crossorigin = "anonymous";     }     tempimage.onload = function() {         projctx.drawimage(tempimage,0,0, projcanvas.width, projcanvas.height);          var dx = projcanvas.width;         var dy = projcanvas.height;          var sourcedata = projctx.getimagedata(0, 0, dx, dy).data;         var target = projctx.createimagedata(dx, dy);         var targetdata = target.data;          (var y = 0, = -1; y < dy; ++y) {             (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) {                     += 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;             }         }         projctx.clearrect(0, 0, dx, dy);         projctx.putimagedata(target, 0, 0);     }     tempimage.src = mapfile;     $(".loaderwrapper").hide(); } 

see this jsfiddle working example. notice instead of converting map, it's filled in transparent areas white. converted image should this.