Canvas Linear Gradients

Posted in Canvas Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 50 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

Linear gradients are powerful tools in web development for creating smooth transitions between colors. When it comes to HTML5 Canvas, linear gradients offer a flexible way to fill shapes and backgrounds with color transitions.

In this guide, we'll explore how to use linear gradients in the HTML5 Canvas element.

💡 Syntax

To create a linear gradient in Canvas, you'll need to follow these steps:

Initialize a gradient object using the createLinearGradient() method.
Define the starting and ending points of the gradient.
Add color stops to specify the colors and their positions along the gradient.

Here's the basic syntax:

Syntax

Copied

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

// Create gradient
const gradient = context.createLinearGradient(x0, y0, x1, y1);

// Add colors
gradient.addColorStop(stopPosition1, 'color1');
gradient.addColorStop(stopPosition2, 'color2');

// Use gradient
context.fillStyle = gradient;
context.fillRect(x, y, width, height);

🧰 Attribute Values

x0, y0: Coordinates of the starting point of the gradient.
x1, y1: Coordinates of the ending point of the gradient.
stopPosition: Position along the gradient axis where the color stop is placed (0 to 1).
color: Color value specified in CSS format (e.g., 'red', '#00ff00', 'rgba(255, 0, 0, 0.5)').

📄 Example

Let's create a simple linear gradient in Canvas:

example.js

Copied

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

// Create gradient
const gradient = context.createLinearGradient(0, 0, 200, 0);

// Add colors
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');

// Draw rectangle with gradient fill
context.fillStyle = gradient;
context.fillRect(20, 20, 150, 100);