Skip to content

Most RGB color functions are not interpreted correctly #2300

Closed

Description

@haykam821

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

Activity

  1. zbjornson commented on Jun 23, 2024

    @zbjornson
    Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions