Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

HTML Canvas Gradients


HTML Canvas Gradients

Gradients let you display smooth transitions between two or more specified colors.

Gradients can be used to fill rectangles, circles, lines, text, etc.

There are two methods used for creating gradients:

  • createLinearGradient() - creates a linear gradient
  • createRadialGradient() - creates a radial/circular gradient

The createLinearGradient() Method

The createLinearGradient() method is used to define a linear gradient.

A linear gradient changes color along a linear pattern (horizontally/vertically/diagonally).

The createLinearGradient() method has the following parameters:

Parameter Description
x0 Required. The x-coordinate of the start point
y0 Required. The y-coordinate of the start point
x1 Required. The x-coordinate of the end point
y1 Required. The y-coordinate of the end point

The gradient object requires two or more color stops.

The addColorStop() method specifies the color stops, and its position along the gradient. The positions can be anywhere between 0 and 1.

To use the gradient, assign it to the fillStyle or strokeStyle property, then draw the shape (rectangle, circle, shape, or text).

Example

Create a linear gradient with two color stops; a light blue color at the starting point of the gradient, and a dark blue color at the ending point. Then, fill the rectangle with the gradient:

Your browser does not support the HTML5 canvas tag.
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");

// Create linear gradient
const grad=ctx.createLinearGradient(0,0, 280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");

// Fill rectangle with gradient
ctx.fillStyle = grad;
ctx.fillRect(10,10, 280,130);
</script>
Try it Yourself »

Example

Here we fill an outlined rectangle with the gradient:

Your browser does not support the HTML5 canvas tag.
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");

// Create linear gradient
const grad=ctx.createLinearGradient(0,0, 280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");

// Fill outlined rectangle with gradient
ctx.lineWidth = 10;
ctx.strokeStyle = grad;
ctx.strokeRect(10,10,280,130);
</script>
Try it Yourself »


Example

Create a linear gradient with three color stops, a light blue color at the starting point of the gradient, a purple color at the middle point of the gradient, and a dark blue color at the ending point. Then, fill the rectangle with the gradient:

Your browser does not support the HTML5 canvas tag.
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");

// Create linear gradient
const grad=ctx.createLinearGradient(0,0, 280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(0.5, "purple");
grad.addColorStop(1, "darkblue");

// Fill rectangle with gradient
ctx.fillStyle = grad;
ctx.fillRect(10,10, 280,130);
</script>
Try it Yourself »

Vertical Linear Gradient

A horizontal gradient goes from left to right and is created by varying the parameters on the x-axis (x1 and x2). The examples above are all horizontal linear gradients.

A vertical gradient goes from top to bottom and is created by varying the parameters on the y-axis (y1 and y2).

Example

Create a vertical linear gradient by varying the parameter values on the y-axis (change y2):

Your browser does not support the HTML5 canvas tag.
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");

// Create linear gradient
const grad=ctx.createLinearGradient(0,0, 0,130);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");

// Fill rectangle with gradient
ctx.fillStyle = grad;
ctx.fillRect(10,10, 280,130);
</script>
Try it Yourself »

Diagonal Linear Gradient

A diagonal gradient is created by varying both the x- and y-axis parameters.

Example

Create a diagonal linear gradient by varying both the x- and y-axis parameters (change x2 and y2):

Your browser does not support the HTML5 canvas tag.
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");

// Create linear gradient
const grad=ctx.createLinearGradient(0,0, 280,130);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");

// Fill rectangle with gradient
ctx.fillStyle = grad;
ctx.fillRect(10,10, 280,130);
</script>
Try it Yourself »

Fill Circle with Gradient

Example

Here we fill a circle with a gradient:

Your browser does not support the HTML5 canvas tag.
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");

// Create linear gradient
const grad=ctx.createLinearGradient(0,0,280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");

// Fill circle with gradient
ctx.beginPath();
ctx.arc(145, 75, 65, 0, 2 * Math.PI);
ctx.fillStyle = grad;
ctx.fill();
</script>
Try it Yourself »

Fill Text with Gradient

Example

Here we fill a text with a gradient:

Your browser does not support the HTML5 canvas tag.
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");

// Create linear gradient
const grad=ctx.createLinearGradient(0,0,280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");

// Fill text with gradient
ctx.font = "50px Arial";
ctx.fillStyle = grad;
ctx.fillText("Hello World",10,80);
</script>
Try it Yourself »

Fill Outlined Text with Gradient

Example

Here we fill an outlined text with a gradient:

Your browser does not support the HTML5 canvas tag.
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");

// Create linear gradient
const grad=ctx.createLinearGradient(0,0,280,0);
grad.addColorStop(0, "lightblue");
grad.addColorStop(1, "darkblue");

// Fill outlined text with gradient
ctx.font = "50px Arial";
ctx.strokeStyle = grad;
ctx.strokeText("Hello World",10,80);
</script>
Try it Yourself »

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.