Need help with Javascript Function 2 skill test

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

Hi @zhupercycle and welcome to the community :wave:

fillStyle is not a function but a property. You can fill your rectangle like this:

ctx.fillStyle = color;

On a general note: You should only include the drawing methods and properties in your draw() function and use x, y, width, height and color as parameters.

Happy coding, :slightly_smiling_face:
Michael

1 Like

Ah, alright, makes sense… Thank you!

Yes I did actually do that initially but switched things to try and find the problem in my code. Turns out it was easier solution than I thought :slight_smile:

1 Like

You’re welcome!

That’s something I hear myself saying a lot :grin: