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


I am now playing with some html5 canvas distortions like below


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.

1 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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.