In the next example, called ch07_clip, we will use another useful canvas operation. We will use a clipping mask to restrict a layer to a small square, creating a peeking window, just like the one in the Google Maps application.
Note
There are way more canvas operations than those described in the examples. However, I tried to pick out the most useful ones for web mapping applications.
For this example, we extend our init function with a custom layer. We register the required precompose and postcompose events on it, and then silently add it to the map:
var clippedLayer = new ol.layer.Tile({
source: new ol.source.MapQuest({
layer: 'osm'
}),
zIndex: 9999
});
clippedLayer.on('precompose', function (evt) {
var ctx = evt.context;
ctx.save();
ctx.beginPath();
ctx.rect(20, 20, 100, 100);
ctx.clip();
});
clippedLayer.on('postcompose', function (evt) {
evt.context.restore();
});
clippedLayer.setMap(map);