Load Leaflet map in canvas element

Question

I am working with leaflet tiles loading tiles to a map div

http://jsfiddle.net/tBCd5/

I am now playing with some html5 canvas distortions like below

http://jsfiddle.net/UF4PK/

It would be cool to load base tiles to a canvas and then be able to use the above distortions on the base map.

Is it possible to load my map tiles into a canvas element rather than a div?

I have seen examples of creating canvas overlays but not an example where base tiles are loaded directly to the canvas element.

Answer 1

I ran into a similar issue today-- I needed to load each tile into a separate canvas element, then operate on each to pixel of each tile to transform the image.

Using L.tileLayer.canvas and this example from John Gravois I was able to grab each tile, access the pixels, and then invert the colors (inversion code from this Mozilla Developer Network help page).

I'm using an Esri ImageService of Toronto to test this approach: http://sampleserver6.arcgisonline.com/arcgis/rest/services/Toronto/ImageServer

I've created Gists of the regular tiles (raw, rendered) and the inverted tiles (raw and rendered).