Automattic / Automattic/node-canvas

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

Open
#2,172 0 comments 0 reactions 0 assignees View on GitHub
Bug Good first issue Help wanted
Dominant language
JavaScript
Stars
10.7k
Forks
1.2k
Avg merge
4d 8h
Merged PRs (30d)
1

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:

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

const 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](https://user-images.githubusercontent.com/133494/206914931-90ba9c97-7148-4fb0-9d02-c031f4220ca9.png)

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

![2](https://user-images.githubusercontent.com/133494/206914934-bf10596d-4634-4d07-a9fc-14f529da90d0.png)

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)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.