Merge pull request #1486 from tradingview/Total_canvas_memory_use_exc…

…eeds_the_maximum_limit_fix

Total canvas memory use exceeds the maximum limit fix

.size-limit.js

@@ -4,21 +4,21 @@ module.exports = [
 	{
 		name: 'CJS',
 		path: 'dist/lightweight-charts.production.cjs',
-		limit: '47.82 KB',
+		limit: '47.87 KB',
 	},
 	{
 		name: 'ESM',
 		path: 'dist/lightweight-charts.production.mjs',
-		limit: '47.76 KB',
+		limit: '47.8 KB',
 	},
 	{
 		name: 'Standalone-ESM',
 		path: 'dist/lightweight-charts.standalone.production.mjs',
-		limit: '49.47 KB',
+		limit: '49.52 KB',
 	},
 	{
 		name: 'Standalone',
 		path: 'dist/lightweight-charts.standalone.production.js',
-		limit: '49.52 KB',
+		limit: '49.57 KB',
 	},
 ];

src/gui/canvas-utils.ts

@@ -24,3 +24,13 @@ export function createBoundCanvas(parentElement: HTMLElement, size: Size): Canva
 	binding.resizeCanvasElement(size);
 	return binding;
 }
+
+export function releaseCanvas(canvas: HTMLCanvasElement): void {
+	// This function fixes the iOS Safari error "Total canvas memory use exceeds the maximum limit".
+	// Seems that iOS Safari stores canvas elements for some additional time internally.
+	// So if we create/destroy a lot of canvas elements in a short period of time we can get this error.
+	// We resize the canvas to 1x1 pixels to force it to release memmory resources.
+	canvas.width = 1;
+	canvas.height = 1;
+	canvas.getContext('2d')?.clearRect(0, 0, 1, 1);
+}

src/gui/pane-widget.ts

@@ -26,7 +26,7 @@ import { TouchMouseEventData } from '../model/touch-mouse-event-data';
 import { IPaneRenderer } from '../renderers/ipane-renderer';
 import { IPaneView } from '../views/pane/ipane-view';
 
-import { createBoundCanvas } from './canvas-utils';
+import { createBoundCanvas, releaseCanvas } from './canvas-utils';
 import { IChartWidgetBase } from './chart-widget';
 import { drawBackground, drawForeground, DrawFunction, drawSourcePaneViews } from './draw-functions';
 import { IPaneViewsGetter } from './ipane-view-getter';
@@ -152,9 +152,11 @@ export class PaneWidget implements IDestroyable, MouseEventHandlers {
 		}
 
 		this._topCanvasBinding.unsubscribeSuggestedBitmapSizeChanged(this._topCanvasSuggestedBitmapSizeChangedHandler);
+		releaseCanvas(this._topCanvasBinding.canvasElement);
 		this._topCanvasBinding.dispose();
 
 		this._canvasBinding.unsubscribeSuggestedBitmapSizeChanged(this._canvasSuggestedBitmapSizeChangedHandler);
+		releaseCanvas(this._canvasBinding.canvasElement);
 		this._canvasBinding.dispose();
 
 		if (this._state !== null) {

src/gui/price-axis-stub.ts

@@ -14,7 +14,7 @@ import { ChartOptionsBase } from '../model/chart-model';
 import { InvalidationLevel } from '../model/invalidate-mask';
 import { PriceAxisRendererOptionsProvider } from '../renderers/price-axis-renderer-options-provider';
 
-import { createBoundCanvas } from './canvas-utils';
+import { createBoundCanvas, releaseCanvas } from './canvas-utils';
 import { PriceAxisWidgetSide } from './price-axis-widget';
 
 export interface PriceAxisStubParams {
@@ -64,6 +64,7 @@ export class PriceAxisStub implements IDestroyable {
 
 	public destroy(): void {
 		this._canvasBinding.unsubscribeSuggestedBitmapSizeChanged(this._canvasSuggestedBitmapSizeChangedHandler);
+		releaseCanvas(this._canvasBinding.canvasElement);
 		this._canvasBinding.dispose();
 	}
 

src/gui/price-axis-widget.ts

@@ -29,7 +29,7 @@ import { PriceAxisRendererOptionsProvider } from '../renderers/price-axis-render
 import { IAxisView } from '../views/pane/iaxis-view';
 import { IPriceAxisView } from '../views/price-axis/iprice-axis-view';
 
-import { createBoundCanvas } from './canvas-utils';
+import { createBoundCanvas, releaseCanvas } from './canvas-utils';
 import { IPriceAxisViewsGetter } from './iaxis-view-getters';
 import { suggestPriceScaleWidth } from './internal-layout-sizes-hints';
 import { MouseEventHandler, MouseEventHandlers, TouchMouseEvent } from './mouse-event-handler';
@@ -155,9 +155,11 @@ export class PriceAxisWidget implements IDestroyable {
 		this._mouseEventHandler.destroy();
 
 		this._topCanvasBinding.unsubscribeSuggestedBitmapSizeChanged(this._topCanvasSuggestedBitmapSizeChangedHandler);
+		releaseCanvas(this._topCanvasBinding.canvasElement);
 		this._topCanvasBinding.dispose();
 
 		this._canvasBinding.unsubscribeSuggestedBitmapSizeChanged(this._canvasSuggestedBitmapSizeChangedHandler);
+		releaseCanvas(this._canvasBinding.canvasElement);
 		this._canvasBinding.dispose();
 
 		if (this._priceScale !== null) {

src/gui/time-axis-widget.ts

@@ -26,7 +26,7 @@ import { IPaneRenderer } from '../renderers/ipane-renderer';
 import { TimeAxisViewRendererOptions } from '../renderers/itime-axis-view-renderer';
 import { IAxisView } from '../views/pane/iaxis-view';
 
-import { createBoundCanvas } from './canvas-utils';
+import { createBoundCanvas, releaseCanvas } from './canvas-utils';
 import { ChartWidget } from './chart-widget';
 import { drawBackground, drawForeground, drawSourcePaneViews } from './draw-functions';
 import { ITimeAxisViewsGetter } from './iaxis-view-getters';
@@ -139,9 +139,11 @@ export class TimeAxisWidget<HorzScaleItem> implements MouseEventHandlers, IDestr
 		}
 
 		this._topCanvasBinding.unsubscribeSuggestedBitmapSizeChanged(this._topCanvasSuggestedBitmapSizeChangedHandler);
+		releaseCanvas(this._topCanvasBinding.canvasElement);
 		this._topCanvasBinding.dispose();
 
 		this._canvasBinding.unsubscribeSuggestedBitmapSizeChanged(this._canvasSuggestedBitmapSizeChangedHandler);
+		releaseCanvas(this._canvasBinding.canvasElement);
 		this._canvasBinding.dispose();
 	}