The issue is with how you're setting the context.fillStyle. You're using a template string inside single quotes, which doesn't interpolate the variables. This makes the color string invalid, so the canvas defaults to black.

Incorrect: context.fillStyle = 'rgba(${myColour[0]}, ${myColour[1]}, ${myColour[2]}, ${myColour[3]})';

This literally sets the string "rgba(${myColour[0]}, ...)" which is not a valid CSS color.

Fix: Use backticks instead of single quotes to enable string interpolation:

context.fillStyle = `rgba(${myColour[0]}, ${myColour[1]}, ${myColour[2]}, ${myColour[3] ?? 1})`;

You can also use destructuring:

const [r, g, b, a = 1] = myColour;

context.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;