OpenLayers 3 - Tile Canvas Context

I am trying to reproduce this example on OL3 (3.6.0) using the code below. I am having trouble to get image context to do getImageData() and putImageData() on OSM event tileloadend

Solution 1:

In OL3 you have to load a tile variable with the corresponding source.

Then you can use postcompose to make an event when loaded and apply the grayscale function to make a canvas.

    function Initialize() {

        var imagery = new ol.layer.Tile({
            source: new ol.source.OSM()
        });


        var map = new ol.Map({
            target: 'map',
            layers: [imagery],
            view: new ol.View({
                center: ol.proj.transform([-2.1833, 41.3833], 'EPSG:4326', 'EPSG:3857'),
                zoom: 6
            })
        });


        //Apply a filter on "postcompose" events.
        imagery.on('postcompose', function(event) {
            greyscale(event.context);
        });

    }

You can find the example here, where the canvas is not over the original layer, but you can change the divs for your purpouse.