YouTip

# HTML Canvas `createRadialGradient()` Method The `createRadialGradient()` method of the Canvas 2D API creates a radial gradient using the size and coordinates of two circles. This method returns a CanvasGradient object. To apply the gradient to shapes, text, or lines, assign this object to the `fillStyle` or `strokeStyle` properties of the canvas context. You can then define color transitions along the gradient using the `addColorStop()` method. --- ## Browser Support The `createRadialGradient()` method is fully supported by all modern browsers: * Google Chrome * Mozilla Firefox * Microsoft Edge / Internet Explorer 9+ * Safari * Opera *Note: Internet Explorer 8 and earlier versions do not support the `` element.* --- ## Syntax and Parameters ### JavaScript Syntax ```javascript const gradient = context.createRadialGradient(x0, y0, r0, x1, y1, r1); ``` ### Parameter Values The method takes six parameters representing two distinct circles (a start circle and an end circle): | Parameter | Description | | :--- | :--- | | `x0` | The x-coordinate of the center of the starting circle. | | `y0` | The y-coordinate of the center of the starting circle. | | `r0` | The radius of the starting circle. | | `x1` | The x-coordinate of the center of the ending circle. | | `y1` | The y-coordinate of the center of the ending circle. | | `r1` | The radius of the ending circle. | --- ## How It Works The radial gradient is rendered by interpolating colors between the circumferences of the starting circle `(x0, y0, r0)` and the ending circle `(x1, y1, r1)`. * **Color Stops:** Use `gradient.addColorStop(offset, color)` to define colors along the gradient. The `offset` is a number between `0.0` (start circle) and `1.0` (end circle). * **Concentric vs. Eccentric:** If the two circles share the same center point, the gradient will be perfectly symmetrical (concentric). If the center points are different, the gradient will shift toward one side, creating a 3D spherical lighting effect. --- ## Code Examples ### Example 1: Basic Radial Gradient This example demonstrates how to create a simple radial gradient and use it to fill a rectangle. ```html Your browser does not support the HTML5 canvas tag. ``` ### Example 2: Creating a 3D Sphere Effect By offsetting the starting circle from the center of the ending circle, you can simulate a light source hitting a 3D sphere. ```javascript const canvas = document.getElementById("sphereCanvas"); const ctx = canvas.getContext("2d"); // Create a radial gradient simulating a light source from the top-left const sphereGrd = ctx.createRadialGradient(80, 80, 10, 100, 100, 70); sphereGrd.addColorStop(0, "#ffffff"); // Highlight color sphereGrd.addColorStop(0.2, "#3498db"); // Base color sphereGrd.addColorStop(1, "#1a4f73"); // Shadow color // Draw a circle filled with the gradient ctx.beginPath(); ctx.arc(100, 100, 70, 0, 2 * Math.PI); ctx.fillStyle = sphereGrd; ctx.fill(); ``` --- ## Important Considerations 1. **Negative Radii:** Passing a negative value for `r0` or `r1` will throw an `IndexSizeError` DOM exception. 2. **Non-finite Values:** If any of the parameters are `NaN`, `Infinity`, or `-Infinity`, the method will throw a `TypeError`. 3. **Coordinate Space:** The coordinates passed to `createRadialGradient()` are relative to the canvas coordinate system, not the shape being drawn. If you move or translate the shape, you may need to adjust the gradient coordinates accordingly.