HTML Canvas Gradients
Last Updated :
01 Dec, 2023
HTML Canvas Gradients is used to give a gradient effect on Canvas with the help of JavaScript. The different shapes, such as rectangles, circles, lines, text, etc, can be filled with Gradients. To create a gradient on Canvas, we can use two techniques, Linear Gradient and Radial Gradient.
Linear Gradients on Canvas
The Linear gradient facilitates the createLinearGradient(x, y, x1, y1) method to draw the linear gradient from left to right. The addColorStop() method defines the color stops and the color. It can be between 0 to 1.
Syntax
.createLinearGradient(x, y, x1, y1);
Parameters
- x: The x-axis coordinates define the starting point.
- y: The x-axis coordinates define the starting point.
- x1: The x1-axis coordinates define the ending point.
- y1: The x-axis coordinates defines the ending point.
Example 1: In this example, we will see how to make Linear Gradients on Canvas with the help of HTML and JavaScript.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>HTML Canvas Gradient</title>
<link rel="stylesheet"
href="styles.css">
</head>
<body>
<p id="gfg">GeeksforGeeks</p>
<h1 id="title-text">
HTML Canvas Gradient
</h1>
<canvas width="200"
height="200"
class="canvasclass"
id="canvasid">
</canvas>
<script src="script1.js"></script>
</body>
</html>
|
CSS
@import url(
body {
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#gfg {
font-size: 40px;
color: green;
}
#canvasid {
border: 2px solid black;
}
|
Javascript
const canvaselement =
document.getElementById("canvasid").getContext("2d");
const gradientvariable =
canvaselement.createLinearGradient(20, 0, 220, 0);
gradientvariable.addColorStop(0, "blue");
gradientvariable.addColorStop(0.3, "yellow");
gradientvariable.addColorStop(0.5, "purple");
gradientvariable.addColorStop(0.7, "pink");
gradientvariable.addColorStop(1, "green");
canvaselement.fillStyle = gradientvariable;
canvaselement.fillRect(10, 10, 170, 170);
|
Output:
Â
Radial Gradients on Canvas
The radial gradient facilitates the createRadialGradient(x, y,r, x1, y1,r1) method to draw the radial gradient. The addColorStop() method defines the color stops and the color. It can be between 0 to 1.
Syntax
.createLinearGradient(x, y, r, x1, y1, r1);
Parameters
- x: The x-axis coordinate of the start circle.
- y: The y-axis coordinate of the start circle.
- r: It defines the radius of the start circle. It must not be negative.
- x1: The x-axis coordinate of the end circle.
- y1: The y-axis coordinate of the end circle.
- r1: It defines the radius of the end circle. It must not be negative.
Example 2: In this example, we will see how to make Radial Gradients on Canvas with the help of HTML and JavaScript.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>HTML Canvas Radial Gradient</title>
<link rel="stylesheet"
href="styles.css">
</head>
<body>
<p id="gfg">GeeksforGeeks</p>
<h1 id="title-text">
HTML Canvas Radial Gradient
</h1>
<canvas width="200"
height="200"
class="canvasclass"
id="canvasid">
</canvas>
<script src="script1.js"></script>
</body>
</html>
|
CSS
@import url(
body {
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#gfg {
font-size: 49px;
color: green;
}
#canvasid {
border: 2px solid black;
}
|
Javascript
const canvaselement =
document.getElementById("canvasid").getContext("2d");
const gradientvariable =
canvaselement.createRadialGradient(115, 95, 35, 105, 105, 75);
gradientvariable.addColorStop(0, "purple");
gradientvariable.addColorStop(0.7, "pink");
gradientvariable.addColorStop(1, "green");
canvaselement.fillStyle = gradientvariable;
canvaselement.fillRect(10, 10, 170, 170);
|
Output:
Â
Share your thoughts in the comments
Please Login to comment...