Do not skip fully transparent canvas fill and stroke styles when the current compositing operator can still affect the destination bitmap. TradingView uses transparent copy fills while repainting its chart canvases, and skipping those draws left old translucent chart pixels in place so later source-over draws accumulated on top. Add text coverage for transparent copy replacing an existing translucent pixel before another translucent draw.
25 lines
928 B
HTML
25 lines
928 B
HTML
<!DOCTYPE html>
|
|
<script src="../include.js"></script>
|
|
<script>
|
|
test(() => {
|
|
const canvas = document.createElement("canvas");
|
|
canvas.width = 1;
|
|
canvas.height = 1;
|
|
|
|
const context = canvas.getContext("2d");
|
|
|
|
context.fillStyle = "rgba(255, 0, 0, 0.2)";
|
|
context.fillRect(0, 0, 1, 1);
|
|
println(`first draw: ${Array.from(context.getImageData(0, 0, 1, 1).data).join(",")}`);
|
|
|
|
context.globalCompositeOperation = "copy";
|
|
context.fillStyle = "rgba(0, 0, 0, 0)";
|
|
context.fillRect(0, 0, 1, 1);
|
|
println(`transparent copy: ${Array.from(context.getImageData(0, 0, 1, 1).data).join(",")}`);
|
|
|
|
context.globalCompositeOperation = "source-over";
|
|
context.fillStyle = "rgba(255, 0, 0, 0.2)";
|
|
context.fillRect(0, 0, 1, 1);
|
|
println(`second draw: ${Array.from(context.getImageData(0, 0, 1, 1).data).join(",")}`);
|
|
});
|
|
</script>
|