OSM Layer to render modified maps (transparent water, white land)

osm.js

var OSMLayer = new OpenLayers.Layer.OSM('OSM Map', null, {                                                             
  eventListeners: {                                                                                                    
    tileloaded: function(evt) {                                                                                        
      var ctx = evt.tile.getCanvasContext();                                                                           
      if (ctx) {                                                                                                       
        var imgd = ctx.getImageData(0, 0, evt.tile.size.w, evt.tile.size.h);                                           
        var pix = imgd.data;                                                                                           
        for (var i = 0, n = pix.length; i < n; i += 4) {                                                               
          if (pix[i] == 181 && pix[i+1] == 208 && pix[i+2] == 208) {                                                   
            // makes the ocean transparent                                                                             
            pix[i+3] = 0;                                                                                              
            pix[i] = pix[i + 1] = pix[i + 2] = 255;                                                                    
          }                                                                                                            
          else if (pix[i] == 241 && pix[i+1] == 238 && pix[i+2] == 232) {                                              
            // makes the land white                                                                                    
            pix[i] = pix[i + 1] = pix[i + 2] = 255;                                                                    
          }                                                                                                            
        }                                                                                                              
        ctx.putImageData(imgd, 0, 0);                                                                                  
        evt.tile.imgDiv.removeAttribute("crossorigin");                                                                
        evt.tile.imgDiv.src = ctx.canvas.toDataURL();                                                                  
      }                                                                                                                
    }                                                                                                                  
  },                                                                                                                   
});