Hi, the following is my code for the skill test, where the objective is to draw a rectangle on a canvas with given coordinates, size and color. My issue is on line 16 where the console on both Chrome and Brave browser says
“Uncaught TypeError: ctx.fillStyle is not a function
at draw (canvas.js:12:9)
at canvas.js:16:1”
Looking at the documentation, fillStyle should be a function, and VS code lists it automatically as a function available? I tested both Chrome and Brave, and when I delete that line, code works perfectly fine drawing a black rectangle.
What function should I use to fill the rectangle with the color I want?
function draw() {
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const x = 50;
const y = 60;
const width = 100;
const height = 75;
const color = 'blue';
canvas.width = 800;
canvas.height = 300;
// *HERE IS MY ISSUE* //
ctx.fillStyle(color);
ctx.fillRect(x, y, height, width);
}
draw();
Uncaught TypeError: ctx.fillStyle is not a function
at draw (canvas.js:12:9)
at canvas.js:16:1
Edit: to add to this, when I paste the code in MDNs own live code testing section
I get the same error in the top box (Java console):
TypeError: ctx.fillStyle is not a function