Automattic/node-canvas

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

Open

#2 172 ouverte le 11 déc. 2022

Voir sur GitHub
 (0 commentaires) (0 réactions) (0 assignés)JavaScript (1 140 forks)batch import
BugGood first issueHelp wanted

Métriques du dépôt

Stars
 (9 524 stars)
Métriques de merge PR
 (Merge moyen 47m) (6 PRs mergées en 30 j)

Description

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)

Guide contributeur