Migrated to OffscreenCanvas 2D rendering context

GarrisonD · Aug 29, 2020 · 03fb2fb · 03fb2fb
1 parent ee18d04
commit 03fb2fb
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/components/CanvasOnSteroids.tsx b/src/components/CanvasOnSteroids.tsx
@@ -4,7 +4,7 @@ const GET_CONTEXT_2D_FAILED_MSG =
   "Getting of 2D Context failed... May your browser not support it?..";
 
 type CanvasOnSteroidsProps = {
-  onContextReady: (context: CanvasRenderingContext2D) => void;
+  onContextReady: (context: OffscreenCanvasRenderingContext2D) => void;
   onWheel: Required<React.DOMAttributes<HTMLCanvasElement>>["onWheel"];
   scale?: number;
   // Keep these two props grouped:
@@ -25,7 +25,7 @@ const CanvasOnSteroids: React.FC<CanvasOnSteroidsProps> = ({
   React.useLayoutEffect(() => {
     const canvas = canvasRef.current!;
 
-    const context = canvas.getContext("2d", {
+    const context = canvas.transferControlToOffscreen().getContext("2d", {
       alpha: false,
       desynchronized: true,
     });

diff --git a/src/utils/canvas-drawer.ts b/src/utils/canvas-drawer.ts
@@ -10,7 +10,7 @@ class CanvasDrawer implements Drawer {
   static readonly CONTEXT_2D_MISSING_MSG =
     "2D Context is missing... I suppose you forget to call #prepare...";
 
-  private readonly context: CanvasRenderingContext2D;
+  private readonly context: OffscreenCanvasRenderingContext2D;
 
   private readonly width: number;
   private readonly height: number;
@@ -26,7 +26,7 @@ class CanvasDrawer implements Drawer {
   lastVisibleCandleIndex = 0;
 
   constructor(
-    context: CanvasRenderingContext2D,
+    context: OffscreenCanvasRenderingContext2D,
     width: number,
     height: number,
     candlesticks: Candlestick[]