Automattic/node-canvas

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

Open

#2,172 opened on 2022年12月11日

GitHub で見る
 (0 comments) (0 reactions) (0 assignees)JavaScript (1,140 forks)batch import
BugGood first issueHelp wanted

Repository metrics

Stars
 (9,524 stars)
PR merge metrics
 (平均マージ 34d 18h) (30d で 2 merged PRs)

説明

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)

コントリビューターガイド