Add willReadFrequently to 2d canvas contexts, where appropriate.

This chang add the willReadFrequently:true 2d context creation
attribute to call sites where canvases will be read from (i.e
getImagData or toDataURL).  This is a performance hint that tells
the browser to optimize for readbacks.

See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently

The new API will soon be launched in chromium-based web browsers.

The objective of this change is to optimize performance and prevent
possible performance regressions when this new feature is launched
by major web browser in the near future.

Author: junov

src/components/images/draw.js

@@ -89,7 +89,7 @@ module.exports = function draw(gd) {
                     canvas.width = this.width;
                     canvas.height = this.height;
 
-                    var ctx = canvas.getContext('2d');
+                    var ctx = canvas.getContext('2d', {willReadFrequently: true});
                     ctx.drawImage(this, 0, 0);
 
                     var dataURL = canvas.toDataURL('image/png');

src/plots/gl2d/scene2d.js

@@ -211,7 +211,7 @@ proto.toImage = function(format) {
     canvas.width = w;
     canvas.height = h;
 
-    var context = canvas.getContext('2d');
+    var context = canvas.getContext('2d', {willReadFrequently: true});
     var imageData = context.createImageData(w, h);
     imageData.data.set(pixels);
     context.putImageData(imageData, 0, 0);

src/plots/gl3d/scene.js

@@ -1084,7 +1084,7 @@ proto.toImage = function(format) {
     var canvas = document.createElement('canvas');
     canvas.width = w;
     canvas.height = h;
-    var context = canvas.getContext('2d');
+    var context = canvas.getContext('2d', {willReadFrequently: true});
     var imageData = context.createImageData(w, h);
     imageData.data.set(pixels);
     context.putImageData(imageData, 0, 0);

src/snapshot/svgtoimg.js

@@ -33,7 +33,7 @@ function svgToImg(opts) {
         var w1 = scale * w0;
         var h1 = scale * h0;
 
-        var ctx = canvas.getContext('2d');
+        var ctx = canvas.getContext('2d', {willReadFrequently: true});
         var img = new Image();
         var svgBlob, url;
 

src/traces/image/hover.js

@@ -24,7 +24,7 @@ module.exports = function hoverPoints(pointData, xval, yval) {
     if(trace._hasZ) {
         pixel = cd0.z[ny][nx];
     } else if(trace._hasSource) {
-        pixel = trace._canvas.el.getContext('2d').getImageData(nx, ny, 1, 1).data;
+        pixel = trace._canvas.el.getContext('2d', {willReadFrequently: true}).getImageData(nx, ny, 1, 1).data;
     }
 
     // return early if pixel is undefined

src/traces/image/plot.js

@@ -92,7 +92,7 @@ module.exports = function plot(gd, plotinfo, cdimage, imageLayer) {
             var canvas = document.createElement('canvas');
             canvas.width = imageWidth;
             canvas.height = imageHeight;
-            var context = canvas.getContext('2d');
+            var context = canvas.getContext('2d', {willReadFrequently: true});
 
             var ipx = function(i) {return Lib.constrain(Math.round(xa.c2p(x0 + i * dx) - left), 0, imageWidth);};
             var jpx = function(j) {return Lib.constrain(Math.round(ya.c2p(y0 + j * dy) - top), 0, imageHeight);};
@@ -167,7 +167,7 @@ module.exports = function plot(gd, plotinfo, cdimage, imageLayer) {
                     var canvas = document.createElement('canvas');
                     canvas.width = w;
                     canvas.height = h;
-                    var context = canvas.getContext('2d');
+                    var context = canvas.getContext('2d', {willReadFrequently: true});
 
                     trace._image = trace._image || new Image();
                     var image = trace._image;
@@ -192,7 +192,7 @@ module.exports = function plot(gd, plotinfo, cdimage, imageLayer) {
                 if(realImage) {
                     href = trace.source;
                 } else {
-                    var context = trace._canvas.el.getContext('2d');
+                    var context = trace._canvas.el.getContext('2d', {willReadFrequently:true});
                     var data = context.getImageData(0, 0, w, h).data;
                     canvas = drawMagnifiedPixelsOnCanvas(function(i, j) {
                         var index = 4 * (j * w + i);