mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-20 07:05:05 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make sure older webkit/blink based browsers are able to render opacity of circles

Browse source
This commit is contained in:
schlagmichdoch 2025-02-16 23:20:43 +01:00
parent ae68ede3f3
commit 8eea54f8dd
2 changed files with 17 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

9
public/scripts/ui-main.js
View file

@ -461,7 +461,14 @@ class BackgroundCanvas {
opacity *= (8 * dw - radius) / dw 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.beginPath();
ctx.arc(x0, y0, radius, 0, 2 * Math.PI); ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
ctx.stroke(); ctx.stroke();

10
public/scripts/worker/canvas-worker.js
View file

@ -96,7 +96,15 @@ function drawCircle(ctx, radius) {
opacity *= (8 * dw - radius) / dw 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.beginPath();
ctx.arc(x0, y0, radius, 0, 2 * Math.PI); ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
ctx.stroke(); ctx.stroke();