I'm currently working on filling a Canvas element with a linear gradient that transitions from White to a dynamic color that will be determined at runtime.
In order to achieve this, I have written a function that takes a floating-point number as its argument and aims to use that variable as the alpha value in an RGBA color.
function setCanvas(fraction) {
fraction = fraction.toFixed(2);
context.rect(0, 0, canvas.width, canvas.height);
var grad = context.createLinearGradient(0, 0, canvas.width, canvas.height);
grad.addColorStop(0, '#FFFFFF');
grad.addColorStop(1, 'rgba(255, 255, 255, fraction)'); // SYNTAX ERROR
context.fillStyle = grad;
context.fill();
}
This is the error message displayed in the log:
Uncaught SyntaxError: Failed to execute 'addColorStop' on 'CanvasGradient': The value provided ('rgba(255, 255, 255, fraction)') could not be parsed as a color.
Although I can see the normalized values of fraction ranging between 0.0 and 1.0, which aligns with the documentation's requirements, manually inputting the same value (e.g., 0.76) into my RGBA color works perfectly fine...
Is there something obvious that I am overlooking? Why isn't this approach working?