Canvas Gradients

HTML Canvas Gradients

Understanding Canvas Gradients

Gradients allow you to create smooth transitions between two or more specified colors. They can be used to fill shapes (rectangles, circles, paths), lines, and even text, offering richer visual effects than solid colors.

There are two main types of gradients in the Canvas API:

• createLinearGradient(x0, y0, x1, y1): Creates a linear gradient. The gradient is defined along a line segment from (x0, y0) to (x1, y1). Colors transition along this line.
• createRadialGradient(x0, y0, r0, x1, y1, r1): Creates a radial (circular) gradient. The gradient is defined by two circles: a start circle centered at (x0, y0) with radius r0, and an end circle centered at (x1, y1) with radius r1. Colors transition between these two circles.

After creating a gradient object, you must define its color stops using the addColorStop() method.

addColorStop(offset, color): Specifies a color stop for the gradient. The offset is a number between 0 (start of the gradient) and 1 (end of the gradient), and color is a CSS color string (e.g., ‘red’, ‘#FF0000’, ‘rgba(255,0,0,0.5)’). You need at least two color stops to create a visible gradient.

To apply the gradient, assign the gradient object to the fillStyle or strokeStyle property of the rendering context, and then draw the desired shape or text.

Using createLinearGradient()

This example demonstrates creating a horizontal linear gradient from red to blue and using it to fill a rectangle.

// Ensure you have a canvas element in your HTML: <canvas id="myCanvas" width="200" height="100"></canvas>
const canvasLinear = document.getElementById('myCanvas');
const ctxLinear = canvasLinear.getContext('2d');

// Create a linear gradient
// Gradient line from (0,0) to (200,0) - horizontal gradient across the canvas width
const linearGradient = ctxLinear.createLinearGradient(0, 0, 200, 0);

// Add color stops
linearGradient.addColorStop(0, 'red');    // Start color
linearGradient.addColorStop(0.5, 'yellow'); // Middle color
linearGradient.addColorStop(1, 'blue');   // End color

// Apply the gradient to fillStyle
ctxLinear.fillStyle = linearGradient;

// Draw a filled rectangle
ctxLinear.fillRect(10, 10, 180, 80);

Using createRadialGradient()

This example shows a radial gradient transitioning from red (inner circle) to blue (outer circle).

// Ensure you have a canvas element in your HTML: <canvas id="myRadialCanvas" width="200" height="150"></canvas>
const canvasRadial = document.getElementById('myRadialCanvas'); // Use a different ID or reuse if appropriate
const ctxRadial = canvasRadial.getContext('2d');

// Create a radial gradient
// Start circle: (75, 50) with radius 5
// End circle: (90, 60) with radius 100
const radialGradient = ctxRadial.createRadialGradient(75, 50, 5, 90, 60, 100);

// Add color stops
radialGradient.addColorStop(0, 'red');
radialGradient.addColorStop(1, 'blue'); // Original tutorial had 'white', changed to blue for more contrast

// Apply the gradient to fillStyle
ctxRadial.fillStyle = radialGradient;

// Draw a filled rectangle (the gradient will be clipped by the rectangle's bounds)
ctxRadial.fillRect(10, 10, 150, 100);

Application Scenario: Creating visually appealing backgrounds, button styles, chart elements, or special effects in games and interactive visualizations.