From 8eea54f8dd022fb67a4454ee0f93c7f8413cac86 Mon Sep 17 00:00:00 2001 From: schlagmichdoch Date: Sun, 16 Feb 2025 23:20:43 +0100 Subject: [PATCH] Make sure older webkit/blink based browsers are able to render opacity of circles --- public/scripts/ui-main.js | 9 ++++++++- public/scripts/worker/canvas-worker.js | 10 +++++++++- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/public/scripts/ui-main.js b/public/scripts/ui-main.js index f9ecbad..6a7dd44 100644 --- a/public/scripts/ui-main.js +++ b/public/scripts/ui-main.js @@ -461,7 +461,14 @@ class BackgroundCanvas { opacity *= (8 * dw - radius) / dw } - ctx.strokeStyle = `rgb(${baseColor} / ${opacity})`; + if (ctx.setStrokeColor) { + // older blink/webkit browsers do not understand opacity in strokeStyle. Use deprecated setStrokeColor + let baseColorRgb = baseColor.split(" "); + ctx.setStrokeColor(baseColorRgb[0], baseColorRgb[1], baseColorRgb[2], opacity); + } + else { + ctx.strokeStyle = `rgb(${baseColor} / ${opacity})`; + } ctx.beginPath(); ctx.arc(x0, y0, radius, 0, 2 * Math.PI); ctx.stroke(); diff --git a/public/scripts/worker/canvas-worker.js b/public/scripts/worker/canvas-worker.js index e7e6bc7..1428bc1 100644 --- a/public/scripts/worker/canvas-worker.js +++ b/public/scripts/worker/canvas-worker.js @@ -96,7 +96,15 @@ function drawCircle(ctx, radius) { opacity *= (8 * dw - radius) / dw } - ctx.strokeStyle = `rgb(${baseColor} / ${opacity})`; + if (ctx.setStrokeColor) { + // older blink/webkit based browsers do not understand opacity in strokeStyle. Use deprecated setStrokeColor instead + // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle#webkitblink-specific_note + let baseColorRgb = baseColor.split(" "); + ctx.setStrokeColor(baseColorRgb[0], baseColorRgb[1], baseColorRgb[2], opacity); + } + else { + ctx.strokeStyle = `rgb(${baseColor} / ${opacity})`; + } ctx.beginPath(); ctx.arc(x0, y0, radius, 0, 2 * Math.PI); ctx.stroke();