Colors, strokeStyle, and fillStyle!
We'll cover the following...
The primary way you colorize content is by setting the strokeStyle property for shape outlines and the fillStyle property for the shape insides:
Between these two properties, you can color everything from lines to geometric shapes to text.
Let's say we have a rectangle that looks as follows:
The code responsible for this work of art looks like this:
To set the fill color of this element, add line 3 that specifies the fillStyle property:
context.beginPath();context.rect(75, 100, 250, 150);context.fillStyle = "#FFCC00";context.fill();
Let’s not stop with just the fill. Since we are already here, we are going to next add a thick outline and give that a color via the strokeStyle property. Add lines 10-12 to your code:
The two lines of code that took our pretty drab looking rectangle and helped make it a bit more lively are the fillStyle and strokeStyle properties. You can argue that the fillStyle probably had more to do with it since the outline is still a pretty dull shade of gray, but anyway…but what we are going to do from here on out is take a look at the various ways you have for specifying colors. While I will be focusing only on the ...