Automattic/node-canvas

fillStyle and strokeStyle fail when using fractional values on rgba

Open

#1,787 opened on Apr 19, 2021

View on GitHub
 (0 comments) (0 reactions) (0 assignees)JavaScript (9,524 stars) (1,140 forks)batch import
BugGood first issue

Description

Issue or Feature

Whenever you try to set a color style with fractional components like 'rgba(120.1, 120.2, 120.3, 1)', it fails to parse and defaults to a black color.

Steps to Reproduce

var Canvas = require('canvas');
var canvas = Canvas.createCanvas(200, 200);
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(240.2,0,0,1)';
ctx.fillRect(20, 20, 40, 40);

Shows a black rectangle instead of a red one.

Your Environment

node-canvas 2.7.0 Node is v12.16.1 on OS X Catalina 10.15.7

Contributor guide

Tech stack
javascriptc
Domain
backendtooling
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
basic JavaScriptfamiliarity with Node.js native modulesunderstanding of CSS color parsing
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
The bug is in the native color parsing code, likely in 'src/color.cc' or similar. The parsing of 'rgba()' currently fails when color components have decimal points. To fix, update the regular expression or parsing logic to accept fractional values like 'rgba(120.1, 120.2, 120.3, 1)'. Check the existing test suite in 'test/' for related color tests and add a test case for fractional rgba. Ensure the fix handles both 'rgba' and 'hsla' consistently if needed.