Canvas Radial Gradients

Posted in Canvas Tutorial

Updated on May 19, 2024

By Mari Selvan

👁️ 35 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

Canvas radial gradients provide a powerful way to create smooth, multi-color transitions within circular areas on an HTML5 canvas. They are particularly useful for creating natural lighting effects, backgrounds, and other visually appealing graphics.

In this guide, we'll explore the syntax, attributes, and practical examples of using radial gradients in the HTML5 canvas.

💡 Syntax

Creating a radial gradient in an HTML5 canvas involves using the createRadialGradient method, which generates a gradient object that can be applied to shapes and paths. The basic syntax for creating a radial gradient is:

Syntax

Copied

let gradient = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

🧰 Attributes

x0, y0: Coordinates of the starting circle's center.
r0: Radius of the starting circle.
x1, y1: Coordinates of the ending circle's center.
r1: Radius of the ending circle.

📄 Example

Let's create a simple canvas with a radial gradient:

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas Radial Gradient Example</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="400"></canvas>
  <script>
    let canvas = document.getElementById('myCanvas');
    let ctx = canvas.getContext('2d');
    
    // Create a radial gradient
    let gradient = ctx.createRadialGradient(200, 200, 0, 200, 200, 200);
    
    // Add color stops
    gradient.addColorStop(0, 'red');
    gradient.addColorStop(0.5, 'yellow');
    gradient.addColorStop(1, 'green');
    
    // Use the gradient to fill a rectangle
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, 400, 400);
  </script>
</body>
</html>

🧠 How it works?

In this example, we've created a radial gradient that transitions from red at the center to yellow at the midpoint and green at the outer edge. This gradient is then used to fill the entire canvas.

🎉 Conclusion

Radial gradients in the HTML5 canvas offer a rich and versatile way to enhance your web graphics.

By mastering the syntax and understanding how to control gradient attributes, you can create dynamic and visually stunning effects that enhance the user experience on your web pages. Experiment with different color stops and radii to discover the full potential of canvas radial gradients.