Merge pull request #361 from l-ouis/datawindow-willreadfrequently

reduce datawindow size 700->50, willReadFrequently to true on canvas contexts

Author: jeffhuang

src/facemesh.mjs

@@ -105,7 +105,7 @@ TFFaceMesh.prototype.getEyePatches = async function(video, imageCanvas, width, h
   // Start building object to be returned
   var eyeObjs = {};
 
-  var leftImageData = imageCanvas.getContext('2d').getImageData(leftOriginX, leftOriginY, leftWidth, leftHeight);
+  var leftImageData = imageCanvas.getContext('2d', { willReadFrequently: true }).getImageData(leftOriginX, leftOriginY, leftWidth, leftHeight);
   eyeObjs.left = {
     patch: leftImageData,
     imagex: leftOriginX,
@@ -114,7 +114,7 @@ TFFaceMesh.prototype.getEyePatches = async function(video, imageCanvas, width, h
     height: leftHeight
   };
 
-  var rightImageData = imageCanvas.getContext('2d').getImageData(rightOriginX, rightOriginY, rightWidth, rightHeight);
+  var rightImageData = imageCanvas.getContext('2d', { willReadFrequently: true }).getImageData(rightOriginX, rightOriginY, rightWidth, rightHeight);
   eyeObjs.right = {
     patch: rightImageData,
     imagex: rightOriginX,

src/index.mjs

@@ -182,7 +182,7 @@ function checkEyesInValidationBox() {
  * @param {y} y - The y co-ordinate of the desired point to plot
  */
 function drawCoordinates(colour,x,y){
-  var ctx = document.getElementById("plotting_canvas").getContext('2d');
+  var ctx = document.getElementById("plotting_canvas").getContext('2d', { willReadFrequently: true });
   ctx.fillStyle = colour; // Red color
   ctx.beginPath();
   ctx.arc(x, y, 5, 0, Math.PI * 2, true);
@@ -222,7 +222,7 @@ function paintCurrentFrame(canvas, width, height) {
     canvas.height = height;
   }
 
-  var ctx = canvas.getContext('2d');
+  var ctx = canvas.getContext('2d', { willReadFrequently: true });
   ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
 }
 
@@ -287,8 +287,8 @@ async function loop() {
     {
       // Get tracker object
       var tracker = webgazer.getTracker();
-      faceOverlay.getContext('2d').clearRect( 0, 0, videoElement.videoWidth, videoElement.videoHeight);
-      tracker.drawFaceOverlay(faceOverlay.getContext('2d'), tracker.getPositions());
+      faceOverlay.getContext('2d', { willReadFrequently: true }).clearRect( 0, 0, videoElement.videoWidth, videoElement.videoHeight);
+      tracker.drawFaceOverlay(faceOverlay.getContext('2d', { willReadFrequently: true }), tracker.getPositions());
     }
 
     // Feedback box

src/ridgeRegThreaded.mjs

@@ -6,7 +6,7 @@ import mat from './mat.mjs';
 const reg = {};
 
 var ridgeParameter = Math.pow(10,-5);
-var dataWindow = 700;
+var dataWindow = 50;
 var weights = {'X':[0],'Y':[0]};
 var trailDataWindow = 10;
 

src/ridgeWorker.mjs

@@ -7,7 +7,7 @@ importScripts('./worker_scripts/util.js', './worker_scripts/mat.js'); // [202007
 var ridgeParameter = Math.pow(10,-5);
 var resizeWidth = 10;
 var resizeHeight = 6;
-var dataWindow = 700;
+var dataWindow = 50;
 var trailDataWindow = 10;
 var trainInterval = 500;
 

src/util.mjs

@@ -226,7 +226,7 @@ util.resizeEye = function(eye, resizeWidth, resizeHeight) {
     canvas.width = eye.width;
     canvas.height = eye.height;
 
-    canvas.getContext('2d').putImageData(eye.patch,0,0);
+    canvas.getContext('2d', { willReadFrequently: true }).putImageData(eye.patch,0,0);
 
     var tempCanvas = document.createElement('canvas');
 

src/util_regression.mjs

@@ -9,7 +9,7 @@ const util_regression = {};
  * Initialize new arrays and initialize Kalman filter for regressions.
  */
 util_regression.InitRegression = function() {
-  var dataWindow = 700;
+  var dataWindow = 50;
   var trailDataWindow = 10;
   this.ridgeParameter = Math.pow(10,-5);
   this.errorXArray = new util.DataWindow(dataWindow);