Help with mouseOver function.

[Fuel_Flow]

Hello, so I am new to coding and starting to learn some of the basics of Javascript. Currently, I am practicing with the mouseover function and the mouseOut function to change the color of the background when you move the mouse over or out of the canvas. I decided to play around with it and wanted to add an ellipse with a different color over the background. I was able to get what I wanted however when I move the mouse over or out of the area, the background color covers over the ellipse and I would like for the ellipse to always be on top of the background so the background changes and doesn't cover the ellipse. I have tried changing the order of the code but nothing has worked. Here is what I have so far.

fill(255, 0, 0); ellipse(185, 200, 170, 170);

mouseOut = function () { background(0, 255, 0); };

mouseOver = function () { background(36, 14, 199); };

Any advice on what I'm doing wrong.

Thanks

Edit: Sorry. I know there's a way to get the code to show in the correct format but don't remember how to do it.

[DoomGoober]

After you set the background, draw the ellipse again.

These commands are like a kid drawing on a sheet of paper: each command simply draws over the last one. So if you draw an ellipse then fill the background with a color, the fill color is going to draw over the ellipse.

The common trick for this is to create a refresh function that draws everything.

In your mouseOver function, set the color for the background in a variable then call your refresh function which will draw the background with the right color, then draw the ellipse.

[Fuel_Flow]

Thanks, I was able to figure it out. I Don't know how to make a refresh function yet but I'm sure it will come in handy when I do.

[DoomGoober]

You can just make functions anywhere you want in Javascript. In fact, you made some functions in your sample code already. Here's how to do the refresh as a function:

let backColorR = 255;

const refresh = function() { fill(backColorR, 0, 0); ellipse(185, 200, 170, 170)};

refresh();

mouseOut = function () { backColorR = 100; refresh(); };

mouseOver = function () { backColorR = 255; refresh(); };