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:
<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:
<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:
<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):
<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):
<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:
<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:
<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:
<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 »
