javascript - OL3 ImageCanvas renderFunction bad performance -

so i'm experimenting using esri opensource example (windy.js) , rendering on openlayers 3 using similar the ol3 d3 example.

windy.js renders wind-animating map on canvas. canvas size seems not change rendering performance.

first, render windy.js canvas , update every 0.5 seconds:

g_windy = new windy({     canvas: $("#canvas")[0],     data: //some data }); //map ol3 map object function redraw() {   windy.stop();    settimeout(function() {     var mapsize = map.getsize();     var extent = map.getview().calculateextent(mapsize);      extent = ol.proj.transformextent(extent, 'epsg:3857', 'epsg:4326');      var canvas_bounds = [         [0,0],         [mapsize[0]*2, mapsize[1]*2]       ];         var map_projected_bounds = [         [           extent[0],           extent[1]         ],         [           extent[2],           extent[3]         ]       ];      windy.start(       canvas_bounds,       mapsize[0]*2, mapsize[1]*2,        map_projected_bounds     );   }, 500); }  redraw(); 

my canvasfunction implementation references canvas windy.js renders , returns it:

var canvasfunction = function(extent, resolution, pixelratio, size, projection) {   canvas = $("canvas#canvas")[0];   canvas.setattribute('width', map.getsize()[0]*4);   canvas.setattribute('height', map.getsize()[1]*4);   return canvas; }; 

i add layer map:

var canvaslayer = new ol.layer.image({   source: new ol.source.imagecanvas({     canvasfunction: canvasfunction,     projection: 'epsg:3857',     ratio: 1   }) });  map.addlayer(canvaslayer); map.getview().on('change:center', redraw); map.getview().on('change:resolution', redraw);  //next update map rerender @ fast interval. note having 1 millisecond vs 60 frames/second not change performace. setinterval(function() { map.updatesize();}, 1); 

my result gives me windy.js layer on map, stuck 1 issues:

• the windy.js canvas has 0 performance issues , runs smoothly, ol3 layer laggy @ higher canvas/map sizes.

copying canvas not perfect implementation of trying achieve, more efficient doing pull-request ol3 , adding functionality can support feature.

because big fan of these wind maps, couldn't resist give try.

the main difference d3 example is, d3 canvas static , has updated when map extent changes. windy.js runs own animation loop , have updated. first windy.js draws own canvas, ol3 have draw canvas onto map. maybe technique optimized, suggest different approach:

create canvas element in windy.js can draw. next create div element openlayers:

<div id="map" class="map">   <canvas id="windymap" class="fill"></canvas>   <div id="olmap" class="fill"></div> </div> 

with lines of css position canvas above map div , make sure events still passed-through (pointer-events: none). every time map panned/zoomed, restart windy.js animation. that's all.

demo - code