From 5849eb39fd8984535decb2112c28d173f058b355 Mon Sep 17 00:00:00 2001 From: Anton Lavrevov Date: Mon, 1 Sep 2025 09:06:07 -0500 Subject: [PATCH] brave detection --- src/Canvas.ts | 37 +++ src/shapes/Text.ts | 4 +- test/sandbox.html | 739 +-------------------------------------------- 3 files changed, 54 insertions(+), 726 deletions(-) diff --git a/src/Canvas.ts b/src/Canvas.ts index fa2db24c..229ec771 100644 --- a/src/Canvas.ts +++ b/src/Canvas.ts @@ -182,6 +182,42 @@ export class SceneCanvas extends Canvas { } } +// function checks if canvas farbling is active +// canvas farbling is a Browser security feature, it break konva internals +function isCanvasFarblingActive() { + const c = Util.createCanvasElement(); + c.width = 1; + c.height = 1; + const ctx = c.getContext('2d', { + willReadFrequently: true, + }) as CanvasRenderingContext2D; + ctx.clearRect(0, 0, 1, 1); + ctx.fillStyle = 'rgba(255,0,255,1)'; // clear #FF00FF, no alpha + ctx.fillRect(0, 0, 1, 1); + const d = ctx.getImageData(0, 0, 1, 1).data; + const exact = d[0] === 255 && d[1] === 0 && d[2] === 255 && d[3] === 255; + return !exact; +} + +function isBraveBrowser() { + if (typeof navigator === 'undefined') { + return false; + } + // @ts-ignore + return navigator.brave?.isBrave() ?? false; +} + +let warned = false; +function checkHitCanvasSupport() { + if (isBraveBrowser() && isCanvasFarblingActive() && !warned) { + warned = true; + Util.error( + 'Looks like you have "Brave shield" enabled in your browser. It breaks KonvaJS internals. Please disable it. You may need to ask your users to do the same.' + ); + } + return isBraveBrowser() && isCanvasFarblingActive(); +} + export class HitCanvas extends Canvas { hitCanvas = true; constructor(config: ICanvasConfig = { width: 0, height: 0 }) { @@ -189,5 +225,6 @@ export class HitCanvas extends Canvas { this.context = new HitContext(this); this.setSize(config.width, config.height); + checkHitCanvasSupport(); } } diff --git a/src/shapes/Text.ts b/src/shapes/Text.ts index f6c61a4d..c6bde6a5 100644 --- a/src/shapes/Text.ts +++ b/src/shapes/Text.ts @@ -1052,8 +1052,8 @@ Factory.addGetterSetter(Text, 'textDecoration', ''); * Note: per-character rendering may disable native kerning/ligatures. * @name Konva.Text#charRenderFunc * @method - * @param {(props: {char: string, index: number, x: number, y: number, lineIndex: number, column: number, isLastInLine: boolean, width: number, context: Konva.Context}) => void} charRenderFunc - * @returns {(props: CharRenderProps) => void} + * @param {Function} charRenderFunc + * @returns {Function} * @example * // apply small x-translation to every second character * text.charRenderFunc(function(props) { diff --git a/test/sandbox.html b/test/sandbox.html index 0db390fd..b7a8f95e 100644 --- a/test/sandbox.html +++ b/test/sandbox.html @@ -2,7 +2,7 @@ - KonvaJS Sandbox + KonvaJS Blur Comparison Sandbox - - - - - - - -
-

- Filter Comparison: Default vs Custom -

- -
-
- -
-
-
-

- Default Konva Filters -

- -
- - -
- - -
-
- - -
-
- - -
-
- - -
-
- -
-
- - - -
-
- - -
-
-
-

- Custom Implementations -

- -
- - -
- - -
-
- - -
-
- - - -
-
-
-
-
- +