fix usage of willReadFrequently

Author: joaomoreno

encoder/test/test.js

@@ -67,7 +67,7 @@ async function benchmark(imageData1, imageData2) {
 function main() {
   const video = document.getElementById('video');
   const canvas = document.getElementById('canvas');
-  const ctx = canvas.getContext('2d');
+  const ctx = canvas.getContext('2d', { willReadFrequently: true });
 
   let frame = 0;
   const imageData1 = [];

src/views/record.ts

@@ -30,7 +30,7 @@ export default class RecordView implements m.ClassComponent<RecordViewAttrs> {
 
     video.srcObject = this.captureStream;
 
-    const ctx = canvas.getContext("2d")!;
+    const ctx = canvas.getContext("2d", { willReadFrequently: true })!;
 
     const worker = new Worker("/dist/ticker.js");
     worker.postMessage(this.app.frameLength);
@@ -94,7 +94,7 @@ export default class RecordView implements m.ClassComponent<RecordViewAttrs> {
           icon: "square-fill",
           onclick: () => this.stopRecording(),
         }),
-        m("canvas.hidden", { width: 640, height: 480, willReadFrequently: true }),
+        m("canvas.hidden", { width: 640, height: 480 }),
         m("video.hidden", { autoplay: true, playsinline: true }),
       ]),
     ];

src/views/render.ts

@@ -44,7 +44,7 @@ export default class RenderView implements m.ClassComponent<RenderViewAttrs> {
       this.app.finishRendering({ blob, url, duration, size: blob.size });
     });
 
-    const ctx = vnode.dom.getElementsByTagName("canvas")[0].getContext("2d")!;
+    const ctx = vnode.dom.getElementsByTagName("canvas")[0].getContext("2d", { willReadFrequently: true })!;
 
     const processFrame = (index: number) => {
       if (index > this.renderOptions.trim.end) {
@@ -96,8 +96,7 @@ export default class RenderView implements m.ClassComponent<RenderViewAttrs> {
         ),
         m("canvas.hidden", {
           width: this.recording.width,
-          height: this.recording.height,
-          willReadFrequently: true
+          height: this.recording.height
         }),
       ]),
     ];