Summary  
This chapter explains how to create and configure linear and radial gradients by defining color stops and how to combine those gradients with patterns using layering, alpha blending, and blend modes.  

General domain of usage  
Digital graphics

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHN0eWxlPgogICAgICAjbXlDYW52YXMgewogICAgICAgIGJvcmRlcjogMnB4IHNvbGlkICM0NDQ7CiAgICAgICAgYmFja2dyb3VuZDogI2ZhZmFmYTsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8Y2FudmFzIGlkPSJteUNhbnZhcyIgd2lkdGg9IjQ1MCIgaGVpZ2h0PSIxNTAiPjwvY2FudmFzPgoKICAgIDxzY3JpcHQ+CiAgICAgIGNvbnN0IGNhbnZhcyA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJteUNhbnZhcyIpOwogICAgICBjb25zdCBjdHggPSBjYW52YXMuZ2V0Q29udGV4dCgiMmQiKTsKCiAgICAgIC8vIENyZWF0ZSBhIGxpbmVhciBncmFkaWVudCBmcm9tIGxlZnQgKDAsMCkgdG8gcmlnaHQgKDIwMCwwKQogICAgICBjb25zdCBncmFkaWVudCA9IGN0eC5jcmVhdGVMaW5lYXJHcmFkaWVudCgwLCAwLCAyMDAsIDApOwoKICAgICAgLy8gQWRkIGNvbG9yIHN0b3BzCiAgICAgIGdyYWRpZW50LmFkZENvbG9yU3RvcCgwLCAicmVkIik7CiAgICAgIGdyYWRpZW50LmFkZENvbG9yU3RvcCgwLjUsICJ5ZWxsb3ciKTsKICAgICAgZ3JhZGllbnQuYWRkQ29sb3JTdG9wKDEsICJncmVlbiIpOwoKICAgICAgLy8gVXNlIHRoZSBncmFkaWVudCBhcyBmaWxsIHN0eWxlCiAgICAgIGN0eC5maWxsU3R5bGUgPSBncmFkaWVudDsKICAgICAgY3R4LmZpbGxSZWN0KDEwLCAxMCwgMjAwLCAxMDApOwogICAgPC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

When working with gradients on the canvas, you define a transition of colors along a line or a circle. Gradients are created using methods such as `createLinearGradient` for straight lines or `createRadialGradient` for circular transitions. Each gradient needs at least two color stops, which are set using the `addColorStop` method. A color stop specifies a color at a specific position in the gradient, where the position is a number between 0 (start) and 1 (end). The browser then smoothly interpolates the colors between these stops, creating a visually appealing effect. The placement and number of color stops influence how the gradient appears—more stops allow for more complex color changes.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHN0eWxlPgogICAgICAjbXlDYW52YXMgewogICAgICAgIGJvcmRlcjogMnB4IHNvbGlkICM0NDQ7CiAgICAgICAgYmFja2dyb3VuZDogI2ZhZmFmYTsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8Y2FudmFzIGlkPSJteUNhbnZhcyIgd2lkdGg9IjQ1MCIgaGVpZ2h0PSIxNTAiPjwvY2FudmFzPgoKICAgIDxzY3JpcHQ+CiAgICAgIGNvbnN0IGltZyA9IG5ldyBJbWFnZSgpOwogICAgICBpbWcuc3JjID0KICAgICAgICAiaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy9hMzczMzhjMi03NTA0LTQzNTctYTgyNi0wNzk2YjI1N2I3ZWIvc2VjdGlvbi0yL2NvZmZlZS5qcGciOwoKICAgICAgaW1nLm9ubG9hZCA9IGZ1bmN0aW9uICgpIHsKICAgICAgICBjb25zdCBjYW52YXMgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgibXlDYW52YXMiKTsKICAgICAgICBjb25zdCBjdHggPSBjYW52YXMuZ2V0Q29udGV4dCgiMmQiKTsKCiAgICAgICAgLy8gQ3JlYXRlIGEgcGF0dGVybiB1c2luZyB0aGUgbG9hZGVkIGltYWdlLCBzZXQgdG8gcmVwZWF0CiAgICAgICAgY29uc3QgcGF0dGVybiA9IGN0eC5jcmVhdGVQYXR0ZXJuKGltZywgInJlcGVhdCIpOwoKICAgICAgICAvLyBVc2UgdGhlIHBhdHRlcm4gYXMgZmlsbCBzdHlsZQogICAgICAgIGN0eC5maWxsU3R5bGUgPSBwYXR0ZXJuOwogICAgICAgIGN0eC5maWxsUmVjdCgyMjAsIDEwLCAyMDAsIDEwMCk7CiAgICAgIH07CiAgICA8L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

You can combine **gradients** and **patterns** to create unique visuals. For example, use a gradient as the base fill and overlay a partially transparent pattern, or mask a pattern with a gradient to create fading effects. Try experimenting with different blend modes, alpha values, and layering techniques to achieve creative results that make your canvas drawings stand out.

Which method creates a linear gradient in the Canvas API?

What is the purpose of addColorStop when working with gradients?

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.

Gradients and Patterns

1. Which method creates a linear gradient in the Canvas API?

2. What is the purpose of addColorStop when working with gradients?