Most RGB color functions are not interpreted correctly

[haykam821]

• If this is an issue with installation, I have read the troubleshooting guide.

From what I can tell, the specification for rgb() and rgba() allows for variations including the use of whitespace, commas, forward slash separators, percentages, and decimals, but the color parsing here seems to only allow for only a few specific formats. This issue creates an inconsistency where transparency is rendered as opaque compared to a browser environment.

Steps to Reproduce

Compare the results of running the following snippet in a browser and in Node.js with canvas:

const canvas = "document" in globalThis ? document.createElement("canvas") : require("canvas").createCanvas();
const context = canvas.getContext("2d");

const entries = [
	"rgb(0, 0, 0)",
	"rgba(0, 0, 0)",
	"rgb(0 0 0)",
	"rgba(0 0 0)",
	"rgb(0, 0, 0, 25%)",
	"rgba(0, 0, 0, 25%)",
	"rgb(0, 0, 0, 0.25)",
	"rgba(0, 0, 0, 0.25)",
	"rgb(0 0 0 / 25%)",
	"rgba(0 0 0 / 25%)",
	"rgb(0 0 0 / 0.25)",
	"rgba(0 0 0 / 0.25)",
];

for (const entry of entries) {
	context.fillStyle = entry;
	console.log(context.fillStyle);
}

Value	Browser (Expected)	Node.js (Actual)
rgb(0, 0, 0)	#000000	#000000
rgba(0, 0, 0)	#000000	#000000
rgb(0 0 0)	#000000	#000000
rgba(0 0 0)	#000000	#000000
rgb(0, 0, 0, 25%)	rgba(0, 0, 0, 0.25)	#000000
rgba(0, 0, 0, 25%)	rgba(0, 0, 0, 0.25)	#000000
rgb(0, 0, 0, 0.25)	rgba(0, 0, 0, 0.25)	#000000
rgba(0, 0, 0, 0.25)	rgba(0, 0, 0, 0.25)	rgba(0, 0, 0, 0.25)
rgb(0 0 0 / 25%)	rgba(0, 0, 0, 0.25)	#000000
rgba(0 0 0 / 25%)	rgba(0, 0, 0, 0.25)	#000000
rgb(0 0 0 / 0.25)	rgba(0, 0, 0, 0.25)	#000000
rgba(0 0 0 / 0.25)	rgba(0, 0, 0, 0.25)	#000000

Environment

• canvas 2.11.2
• macOS Sonoma 14.1

[zbjornson]

Fixed in #2384, will be in the next 3.0.0-rc and final v3.0.0.