Automattic/node-canvas

Setting `globalAlpha` to a value other than 1 messes with CanvasPatterns

Open

#2172 aperta il 11 dic 2022

Vedi su GitHub
 (0 commenti) (0 reazioni) (0 assegnatari)JavaScript (1140 fork)batch import
BugGood first issueHelp wanted

Metriche repository

Star
 (9524 star)
Metriche merge PR
 (Merge medio 47m) (6 PR mergiate in 30 g)

Descrizione

Issue

Setting globalAlpha to a value other than 1 messes with CanvasPatterns.

Steps to Reproduce

Change the value set by globalAlpha in the code below:

const { createCanvas, loadImage, DOMMatrix } = require("canvas");
const canvas = createCanvas(200, 200);
const ctx = canvas.getContext("2d");

const svg = `<svg viewBox="0 0 64 64" width="64" height="64" xmlns="http://www.w3.org/2000/svg">
<path
  fill="none"
  d="M-32 16s16.915 32 32 32 16.915-32 32-32 16.915 32 32 32 32-32 32-32"
  stroke="#CC0000"
  stroke-width="4.5"
  stroke-linejoin="round" />
</svg>`;

const dataUrl = `data:image/svg+xml;base64,${btoa(svg)}`;

loadImage(dataUrl).then((image) => {
  const pattern = ctx.createPattern(image, "repeat");
  pattern.setTransform(new DOMMatrix([1, 0, 0, 1, 32, 32]));
  ctx.globalAlpha = 1;
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 128, 128);
  console.log(canvas.toDataURL());
});

Setting globalAlpha to 1 results in this (with the pattern how it expect it to be):

1

Setting globalAlpha to 0.555 (or any other value) results in this:

2

The order of operations does not appear to matter.

Your Environment

  • Version of node-canvas: 2.10.2
  • Environment: Node 16.13.1 @ Ubuntu 22.04.1 LTS (5.15.0-10053-tuxedo)

Guida contributor