OL3 WMS canvas

by Iblasi

HTML

<script src="https://openlayers.org/en/v3.0.0/build/ol.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<body onload="Initialize();">
	<p><b>Canvas With OpenLayers &amp; HTML5 Canvas Demo</b>
	</p>
	<div>
		<div id="mapTiles" class="map" style="width:600px;height:700px;border:1px solid black;"></div>
		<!-- div id="map" class="map"></div> -->
		<div id="mapcanvas" style="width:600px;height:700px;border:1px solid black;" class="mapcanvas">
			<canvas id="myCanvas"">
				Your browser does not support the HTML5 canvas tag.
			</canvas>
		</div>

	</div>
</body>

CSS

body {
		font-family: sans-serif;
	}
	p {
		width: 95%;
	}
	a {
		text-decoration: none;
		color: black;
		font-weight: bold;
		font-size: 1.1em;
	}
	div.map {
		width: 45%;
		height:90%;
		float: left;
		border-style:solid;
		border-right-width:5%;
	}
	div.mapcanvas {
		width: 45%;
		height:90%;
		float: left;
		border:3px dashed black;
		border-style:dashed;
	}

JavaScript

var lon = -3.66;
		var lat = 40.36;
		var zoomLvl = 5;

		//***************************************
		// Initialize Map
		//***************************************
		function Initialize() {

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

			var overlay = new ol.layer.Tile({
				source: new ol.source.TileWMS({
								url: 'http://www.idee.es/wms/MTN-Raster/MTN-Raster',
								params: {
									'LAYERS': 'mtn_rasterizado',
									'TRANSPARENT': 'true'
								}
                     })
			});


			var mapTiles = new ol.Map({
				target: 'mapTiles',		// The DOM element that will contains the map
				renderer: 'canvas',		// Force the renderer to be used
				layers: [raster,overlay],
				// Create a view centered on the specified location and zoom level
				view: new ol.View({
					center: ol.proj.transform([2.1833, 41.3833], 'EPSG:4326', 'EPSG:3857'),
					zoom: 6
				})
			});

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


		}


		//***************************************
		// Aux Func.
		//***************************************

		// function applies greyscale to every pixel in canvas
		function greyscale(context) {
			var canvas = context.canvas;
			var width = canvas.width;
			var height = canvas.height;
			console.log('width: ' + width);
			console.log('height: ' + height);


			var inputData = context.getImageData(0, 0, width, height).data;
			console.log('inputData.length: ' + inputData.length);


			var canvas = document.getElementById('myCanvas');
			var ctx = canvas.getContext('2d');
			ctx.canvas.width  = width;
			ctx.canvas.height = height;
			ctx.fillStyle = "rgba(0, 0, 0, 0)"
			var myImageData = ctx.createImageData(ctx.canvas.width, ctx.canvas.height);
			var d = myImageData.data;

			for(i=0; i<inputData.length; i += 4){

				var r = inputData[i];
				var g = inputData[i + 1];
				var b = inputData[i + 2];
				// CIE luminance for...