Automattic/node-canvas

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

Open

#2.172 aberto em 11 de dez. de 2022

Ver no GitHub
 (0 comments) (0 reactions) (0 assignees)JavaScript (9.524 stars) (1.140 forks)batch import
BugGood first issueHelp wanted

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)

Guia do colaborador