Canvas over openlayers plotting matrix

[المشرف العام]

I am trying to have a OpenStreetMaps as base layer and add a canvas layer based on a matrix values.I have use this post to create an example on javascript

var map;var fromProjection = new OpenLayers.Projection("EPSG:4326");var toProjection = new OpenLayers.Projection("EPSG:900913");//***************************************// INIT MAP//***************************************function Initialize() { LoadMap(48.0, -3.0, 5);}//***************************************// MAP//***************************************function LoadMap(lat, lon, zoom) { //Define map options var options = { projection: "EPSG:900913", center: new OpenLayers.LonLat(lon, lat).transform(fromProjection, toProjection), units: 'km' }; map = new OpenLayers.Map("mapDiv", options); var osmLayer = new OpenLayers.Layer.OSM(); //Switch control map.addLayers([osmLayer]); map.addControls([ new OpenLayers.Control.Navigation(), new OpenLayers.Control.Attribution(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.LayerSwitcher() ]); //Center the map map.zoomTo(zoom); // Detecting map changes using Openlayers map.events.register("moveend", map, function(){ Func_Event(map); }); map.events.register("zoomend", map, function(){ Func_Event(map); });}//***************************************// Extra Functions//***************************************//This function runs after every eventfunction Func_Event(map) { var NumberPixelsX = map.size.w; var NumberPixelsY = map.size.h; $("#Input").text('NumberPixelsX '+NumberPixelsX+'\tNumberPixelsY '+NumberPixelsY); var array = new Array(NumberPixelsX*NumberPixelsY*4) for (i=0;i