I have made this mistake twice now, and someone suggested I should make a post about it so that others may benefit from my experience.
When you make a rectangle that has a length or a width of 1 pixel, it has no inside, so the fill() command won't work to color it. The only way to color a rectangle like this is by using the stroke() command, which changes the color of the outline, the boundary of the rectangle. Since a one-pixel rectangle is nothing but outline this makes perfect sense,
The first time I had this problem, I was trying to do Project: Mountain Range from the Advanced JS course on natural simulations.
The initial project code for this assignment draws a mountain range made up of 400 vertical pixel-wide rectangles of essentially random heights.
I kept trying to change the color of the mountains, and I was dumbfounded that it wasn't working. Eventually, and this took me HOURS to figure out, I realized that the mountains had not set an initial fill() color, and I couldn't figure out why they were black in the first place. I finally posted a help request and was reminded that the mountains were made of stroke color, which defaults to black.
I ran into the problem AGAIN yesterday where I had this bizarre intermittent problem with my Fish Tank project. I had drawn a graduated blue background for my Fish Tank, again, by making a series of single-pixel rectangles, this time, horizontally, and all of width 400.
This was really weird, because it was actually working. I had a blue graduated background that looked great. But any time I restarted the program, it would come up black. Then, if I changed any one character in the program, even if it was in a comment, the blue would mysteriously come back again.
I posted another help request, and was being assisted by a prolific mentor on the CS community, a very experienced and advanced programmer who has been a great help to me many times. We were troubleshooting problems with the programming environment, trying to make the program remember my blue background and restore it each time. Every time, my program appeared to be fixed, but would fail again if I reloaded the page on my web browser.
We were both stumped. Finally Pamela Fox came and took a look, and said, "Um, i think you might need to use stroke instead of fill here...."
Boy, did I feel stupid, making the same mistake twice. Here we were trying to fix a glitch to let my program background blue, when the real glitch was that it had ever worked at all in the first place!
But I'm actually a pretty smart guy, and the man who was helping me is really brilliant. I figured, if this problem stumped both of us, it will probably be a problem for a lot of other people, too, so I'm here, shouting from the rooftops, hoping that I can save a few of you from hours of futile troubleshooting on what is really a very basic issue. And maybe offer you a bit of a giggle at the same time.