perf: (DesynchronizedHint) Includes configuration for desynchronized …

…hint in canvas creation (#402)
cornerstonejs · Sep 13, 2021 · 0629c93 · 0629c93
1 parent a56ecb6
commit 0629c93
Show file tree

Hide file tree

Showing 17 changed files with 81 additions and 26 deletions.
diff --git a/example/WebGL/index.html b/example/WebGL/index.html
@@ -82,7 +82,9 @@ <h4>Canvas</h4>
     });
 
     const options = {
-        renderer: 'webgl'
+        renderer: 'webgl',
+        desynchronized: true,
+        preserveDrawingBuffer: true
     };
 
     cornerstone.enable(elementWebGL, options);

diff --git a/example/colorImage/index.html b/example/colorImage/index.html
@@ -42,7 +42,10 @@ <h1>
 
         canvas.width = width;
         canvas.height = height;
-        const canvasContext = canvas.getContext('2d');
+        const canvasContext = canvas.getContext('2d', {
+            desynchronized: true
+        });
+
         const imageData = canvasContext.createImageData(width, height);
         const pixelData = imageData.data;
         const rnd = Math.round(Math.random() * 255);

diff --git a/example/falseColorMapping/index.html b/example/falseColorMapping/index.html
@@ -161,7 +161,9 @@ <h1>
     function updateColorbar(colormap) {
         const lookupTable = colormap.createLookupTable();
         const canvas = document.getElementById('colorbar');
-        const ctx = canvas.getContext('2d');
+        const ctx = canvas.getContext('2d', {
+            desynchronized: true
+        });
         const height = canvas.height;
         const width = canvas.width;
         const colorbar = ctx.createImageData(512, 20);

diff --git a/example/imageCache/index.html b/example/imageCache/index.html
@@ -88,7 +88,9 @@ <h1>
 
         canvas.width = width;
         canvas.height = height;
-        var canvasContext = canvas.getContext('2d');
+        var canvasContext = canvas.getContext('2d', {
+            desynchronized: true
+        });
         var imageData = canvasContext.createImageData(width, height);
         var pixelData = imageData.data;
         var index = 0;

diff --git a/src/internal/drawCompositeImage.js b/src/internal/drawCompositeImage.js
@@ -161,7 +161,9 @@ export default function (enabledElement, invalidated) {
   }
 
   // Get the enabled element's canvas so we can draw to it
-  const context = enabledElement.canvas.getContext('2d');
+  const context = enabledElement.canvas.getContext('2d', {
+    desynchronized: true
+  });
 
   context.setTransform(1, 0, 0, 1, 0, 0);
 

diff --git a/src/internal/drawImageSync.js b/src/internal/drawImageSync.js
@@ -66,7 +66,9 @@ export default function (enabledElement, invalidated) {
     element,
     image,
     enabledElement,
-    canvasContext: enabledElement.canvas.getContext('2d'),
+    canvasContext: enabledElement.canvas.getContext('2d', {
+      desynchronized: true
+    }),
     renderTimeInMs
   };
 

diff --git a/src/internal/tryEnableWebgl.js b/src/internal/tryEnableWebgl.js
@@ -11,6 +11,8 @@ export default function (options) {
     // And return the renderCanvas from the WebGL rendering path
     webGL.renderer.initRenderer();
     options.renderer = 'webgl';
+    options.desynchronized = true;
+    options.preserveDrawingBuffer = true;
 
     return true;
   }
@@ -20,6 +22,7 @@ export default function (options) {
   console.error('WebGL not available, falling back to Canvas renderer');
 
   delete options.renderer;
+  delete options.preserveDrawingBuffer;
 
   return false;
 }
diff --git a/src/rendering/initializeRenderCanvas.js b/src/rendering/initializeRenderCanvas.js
@@ -13,7 +13,9 @@ export default function (enabledElement, image) {
   renderCanvas.width = image.width;
   renderCanvas.height = image.height;
 
-  const canvasContext = renderCanvas.getContext('2d');
+  const canvasContext = renderCanvas.getContext('2d', {
+    desynchronized: true
+  });
 
   // NOTE - we need to fill the render canvas with white pixels since we
   // control the luminance using the alpha channel to improve rendering performance.

diff --git a/src/rendering/renderColorImage.js b/src/rendering/renderColorImage.js
@@ -122,7 +122,9 @@ export function renderColorImage (enabledElement, invalidated) {
   }
 
   // Get the canvas context and reset the transform
-  const context = enabledElement.canvas.getContext('2d');
+  const context = enabledElement.canvas.getContext('2d', {
+    desynchronized: true
+  });
 
   context.setTransform(1, 0, 0, 1, 0, 0);
 
@@ -175,7 +177,9 @@ export function addColorLayer (layer, invalidated) {
   image.rgba = true;
   layer.canvas = getRenderCanvas(layer, image, invalidated);
 
-  const context = layer.canvas.getContext('2d');
+  const context = layer.canvas.getContext('2d', {
+    desynchronized: true
+  });
 
   // Turn off image smooth/interpolation if pixelReplication is set in the viewport
   context.imageSmoothingEnabled = !layer.viewport.pixelReplication;

diff --git a/src/rendering/renderGrayscaleImage.js b/src/rendering/renderGrayscaleImage.js
@@ -84,7 +84,9 @@ export function renderGrayscaleImage (enabledElement, invalidated) {
   }
 
   // Get the canvas context and reset the transform
-  const context = enabledElement.canvas.getContext('2d');
+  const context = enabledElement.canvas.getContext('2d', {
+    desynchronized: true
+  });
 
   context.setTransform(1, 0, 0, 1, 0, 0);
 
@@ -144,7 +146,9 @@ export function addGrayscaleLayer (layer, invalidated, useAlphaChannel = false)
 
   layer.canvas = getRenderCanvas(layer, image, invalidated, useAlphaChannel);
 
-  const context = layer.canvas.getContext('2d');
+  const context = layer.canvas.getContext('2d', {
+    desynchronized: true
+  });
 
   // Turn off image smooth/interpolation if pixelReplication is set in the viewport
   context.imageSmoothingEnabled = !layer.viewport.pixelReplication;

diff --git a/src/rendering/renderLabelMapImage.js b/src/rendering/renderLabelMapImage.js
@@ -96,7 +96,9 @@ export function renderLabelMapImage (enabledElement, invalidated) {
   }
 
   // Get the canvas context and reset the transform
-  const context = enabledElement.canvas.getContext('2d');
+  const context = enabledElement.canvas.getContext('2d', {
+    desynchronized: true
+  });
 
   context.setTransform(1, 0, 0, 1, 0, 0);
 
@@ -146,7 +148,9 @@ export function addLabelMapLayer (layer, invalidated) {
 
   layer.canvas = getRenderCanvas(layer, image, invalidated);
 
-  const context = layer.canvas.getContext('2d');
+  const context = layer.canvas.getContext('2d', {
+    desynchronized: true
+  });
 
   // Turn off image smooth/interpolation if pixelReplication is set in the viewport
   context.imageSmoothingEnabled = !layer.viewport.pixelReplication;

diff --git a/src/rendering/renderPseudoColorImage.js b/src/rendering/renderPseudoColorImage.js
@@ -99,7 +99,9 @@ export function renderPseudoColorImage (enabledElement, invalidated) {
   }
 
   // Get the canvas context and reset the transform
-  const context = enabledElement.canvas.getContext('2d');
+  const context = enabledElement.canvas.getContext('2d', {
+    desynchronized: true
+  });
 
   context.setTransform(1, 0, 0, 1, 0, 0);
 
@@ -150,7 +152,9 @@ export function addPseudoColorLayer (layer, invalidated) {
 
   layer.canvas = getRenderCanvas(layer, image, invalidated);
 
-  const context = layer.canvas.getContext('2d');
+  const context = layer.canvas.getContext('2d', {
+    desynchronized: true
+  });
 
   // Turn off image smooth/interpolation if pixelReplication is set in the viewport
   context.imageSmoothingEnabled = !layer.viewport.pixelReplication;

diff --git a/src/rendering/renderWebImage.js b/src/rendering/renderWebImage.js
@@ -27,7 +27,9 @@ export function renderWebImage (enabledElement, invalidated) {
         enabledElement.viewport.invert === false) {
 
     // Get the canvas context and reset the transform
-    const context = enabledElement.canvas.getContext('2d');
+    const context = enabledElement.canvas.getContext('2d', {
+      desynchronized: true
+    });
 
     context.setTransform(1, 0, 0, 1, 0, 0);
 

diff --git a/src/webgl/renderer.js b/src/webgl/renderer.js
@@ -79,6 +79,7 @@ function initWebGL (canvas) {
   try {
     // Try to grab the standard context. If it fails, fallback to experimental.
     const options = {
+      desynchronized: true,
       preserveDrawingBuffer: true // Preserve buffer so we can copy to display canvas element
     };
 

diff --git a/test/internal/displayedArea_test.js b/test/internal/displayedArea_test.js
@@ -108,7 +108,9 @@ describe('displayedArea', function () {
 
     this.element.addEventListener('cornerstoneimagerendered', () => {
       const canvas = getEnabledElement(this.element).canvas;
-      const canvasContext = canvas.getContext('2d');
+      const canvasContext = canvas.getContext('2d', {
+        desynchronized: true
+      });
       const imageData = canvasContext.getImageData(0, 0, canvas.width, canvas.height);
       const data = imageData.data;
 
@@ -143,7 +145,9 @@ describe('displayedArea', function () {
 
     this.element.addEventListener('cornerstoneimagerendered', () => {
       const canvas = getEnabledElement(this.element).canvas;
-      const canvasContext = canvas.getContext('2d');
+      const canvasContext = canvas.getContext('2d', {
+        desynchronized: true
+      });
       const imageData = canvasContext.getImageData(0, 0, canvas.width, canvas.height);
       const data = imageData.data;
 
@@ -180,7 +184,9 @@ describe('displayedArea', function () {
 
     this.element.addEventListener('cornerstoneimagerendered', () => {
       const canvas = getEnabledElement(this.element).canvas;
-      const canvasContext = canvas.getContext('2d');
+      const canvasContext = canvas.getContext('2d', {
+        desynchronized: true
+      });
       const imageData = canvasContext.getImageData(0, 0, canvas.width, canvas.height);
       const data = imageData.data;
 
@@ -218,7 +224,9 @@ describe('displayedArea', function () {
 
     this.element.addEventListener('cornerstoneimagerendered', () => {
       const canvas = getEnabledElement(this.element).canvas;
-      const canvasContext = canvas.getContext('2d');
+      const canvasContext = canvas.getContext('2d', {
+        desynchronized: true
+      });
       const imageData = canvasContext.getImageData(0, 0, canvas.width, canvas.height);
       const data = imageData.data;
 

diff --git a/test/rendering/renderColorImage_test.js b/test/rendering/renderColorImage_test.js
@@ -21,7 +21,9 @@ describe('renderColorImage', function () {
     enable(this.element);
 
     const enabledElement = getEnabledElement(this.element);
-    const canvasContext = enabledElement.canvas.getContext('2d');
+    const canvasContext = enabledElement.canvas.getContext('2d', {
+      desynchronized: true
+    });
     const imageData = canvasContext.createImageData(width, height);
     const pixelData = imageData.data;
     const rnd = Math.round(Math.random() * 255);
@@ -155,7 +157,9 @@ describe('renderColorImage', function () {
     const width = 256;
     const height = 256;
     const enabledElement = getEnabledElement(this.element);
-    const canvasContext = enabledElement.canvas.getContext('2d');
+    const canvasContext = enabledElement.canvas.getContext('2d', {
+      desynchronized: true
+    });
     const imageData2 = canvasContext.createImageData(width, height);
     const pixelData2 = imageData2.data;
     const rnd = Math.round(Math.random() * 255);

diff --git a/test/rendering/renderToCanvas_test.js b/test/rendering/renderToCanvas_test.js
@@ -11,7 +11,9 @@ describe('renderToCanvas', function () {
     this.height = 256;
     this.width = 256;
 
-    const canvasContext = this.canvas1.getContext('2d');
+    const canvasContext = this.canvas1.getContext('2d', {
+      desynchronized: true
+    });
     const imageData = canvasContext.createImageData(this.width, this.height);
     const rnd = Math.round(Math.random() * 255);
     const pixelData = imageData.data;
@@ -54,7 +56,7 @@ describe('renderToCanvas', function () {
     // Arrange
     const renderCanvas1 = document.createElement('canvas');
     const viewport = { hflip: true };
-    const options = { renderer: 'webgl' };
+    const options = { renderer: 'webgl', desynchronized: true, preserveDrawingBuffer: true };
 
     renderCanvas1.width = this.width;
     renderCanvas1.height = this.height;
@@ -73,11 +75,15 @@ describe('renderToCanvas', function () {
     // Act
     renderToCanvas(renderCanvas1, this.image, viewport, options);
 
-    const canvasContext1 = this.canvas1.getContext('2d');
+    const canvasContext1 = this.canvas1.getContext('2d', {
+      desynchronized: true
+    });
     const imageData1 = canvasContext1.createImageData(this.width, this.height);
     const pixelData1 = imageData1.data;
 
-    const canvasContext2 = renderCanvas1.getContext('2d');
+    const canvasContext2 = renderCanvas1.getContext('2d', {
+      desynchronized: true
+    });
     const imageData2 = canvasContext2.createImageData(this.width, this.height);
     const pixelData2 = imageData2.data;