Summary  
This chapter covers how to customize the fill and outline styles of canvas shapes using fillStyle and strokeStyle, and how to clear specific rectangular areas with clearRect.  

General domain of usage  
Interactive graphics (e.g., game visuals or dynamic drawing applications)

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHN0eWxlPgogICAgICAjbXlDYW52YXMgewogICAgICAgIGJvcmRlcjogMnB4IHNvbGlkICM0NDQ7CiAgICAgICAgYmFja2dyb3VuZDogI2ZhZmFmYTsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8Y2FudmFzIGlkPSJteUNhbnZhcyIgd2lkdGg9IjQwMCIgaGVpZ2h0PSIyNTAiPjwvY2FudmFzPgoKICAgIDxzY3JpcHQ+CiAgICAgIGNvbnN0IGNhbnZhcyA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJteUNhbnZhcyIpOwogICAgICBjb25zdCBjdHggPSBjYW52YXMuZ2V0Q29udGV4dCgiMmQiKTsKCiAgICAgIC8vIERyYXcgYSBmaWxsZWQgcmVjdGFuZ2xlCiAgICAgIGN0eC5maWxsU3R5bGUgPSAiIzM0OThkYiI7CiAgICAgIGN0eC5maWxsUmVjdCgyMCwgMjAsIDE1MCwgMTAwKTsKCiAgICAgIC8vIERyYXcgYW4gb3V0bGluZWQgcmVjdGFuZ2xlCiAgICAgIGN0eC5zdHJva2VTdHlsZSA9ICIjZTc0YzNjIjsKICAgICAgY3R4LmxpbmVXaWR0aCA9IDQ7CiAgICAgIGN0eC5zdHJva2VSZWN0KDIwMCwgMjAsIDE1MCwgMTAwKTsKICAgIDwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

The `fillStyle` property allows you to set the color, gradient, or pattern used to fill shapes drawn on the canvas. You can assign a color using a string like `"#ff0000"` for red or `"rgba(52, 152, 219, 0.5)"` for a semi-transparent blue. Similarly, `strokeStyle` sets the color, gradient, or pattern for the outlines of shapes. Both properties accept CSS color values, enabling a wide variety of visual effects.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHN0eWxlPgogICAgICAjbXlDYW52YXMgewogICAgICAgIGJvcmRlcjogMnB4IHNvbGlkICM0NDQ7CiAgICAgICAgYmFja2dyb3VuZDogI2ZhZmFmYTsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8Y2FudmFzIGlkPSJteUNhbnZhcyIgd2lkdGg9IjQwMCIgaGVpZ2h0PSIyNTAiPjwvY2FudmFzPgoKICAgIDxzY3JpcHQ+CiAgICAgIGNvbnN0IGNhbnZhcyA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJteUNhbnZhcyIpOwogICAgICBjb25zdCBjdHggPSBjYW52YXMuZ2V0Q29udGV4dCgiMmQiKTsKCiAgICAgIC8vIEZpbGxlZCByZWN0YW5nbGUgd2l0aCBzb2xpZCBjb2xvcgogICAgICBjdHguZmlsbFN0eWxlID0gIiMyZWNjNzEiOwogICAgICBjdHguZmlsbFJlY3QoMjAsIDE0MCwgMTAwLCA2MCk7CgogICAgICAvLyBGaWxsZWQgcmVjdGFuZ2xlIHdpdGggdHJhbnNwYXJlbmN5CiAgICAgIGN0eC5maWxsU3R5bGUgPSAicmdiYSgyNDEsIDE5NiwgMTUsIDAuNSkiOwogICAgICBjdHguZmlsbFJlY3QoMTQwLCAxNDAsIDEwMCwgNjApOwoKICAgICAgLy8gT3V0bGluZWQgcmVjdGFuZ2xlIHdpdGggYSBkaWZmZXJlbnQgY29sb3IKICAgICAgY3R4LnN0cm9rZVN0eWxlID0gIiM4ZTQ0YWQiOwogICAgICBjdHgubGluZVdpZHRoID0gMzsKICAgICAgY3R4LnN0cm9rZVJlY3QoMjYwLCAxNDAsIDEwMCwgNjApOwogICAgPC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

To remove part of your drawing or reset a specific area, use `clearRect(x, y, width, height)`. This method erases everything within the defined rectangle, allowing you to clear mistakes, update animations, or manage dynamic content efficiently. For example, calling `ctx.clearRect(0, 0, canvas.width, canvas.height)` will clear the entire canvas.

Which method would you use to draw a filled rectangle?

What property is used to set the color for filling shapes?

Create visual and interactive projects with the HTML Canvas API using plain JavaScript. Draw shapes, render text, work with images, and control colors, gradients, and pixels. Animate objects, handle user input, and build simple games and visual effects step by step.

Learn how the Canvas element works and how to access its drawing context. Work with coordinates and master essential drawing techniques for lines, shapes, and paths. Build the foundation needed for everything from graphics to games.

Enhance your visuals with text rendering, image drawing, gradients, and patterns. Explore the basics of pixel manipulation and add simple user interaction with mouse and keyboard input. Create richer and more expressive canvas graphics.

Use the Canvas API to animate objects, simulate motion, and build interactive experiences. Combine physics, drawing operations, and input handling to create small games and visual effects. Apply all your skills in fun, practical mini-projects.

Rectangles and Filled Shapes

1. Which method would you use to draw a filled rectangle?

2. What property is used to set the color for filling shapes?

Awesome!

Rectangles and Filled Shapes

1. Which method would you use to draw a filled rectangle?

2. What property is used to set the color for filling shapes?