Open In App

HTML Canvas Gradients

Last Updated : 01 Dec, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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:

Screenshot-2023-11-28-131523

 

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:

Screenshot-2023-11-28-132242

 



Previous Article
Next Article

Similar Reads

HTML SVG Gradients
SVG Gradient is used to smooth transition one color to another color within a shape. SVG provides two types of gradients. Linear Gradients: Transition from one direction to another.Radial Gradients: Transition circularly from one color to another from one direction to another. Linear Gradients: The linear-gradient() CSS function is used to create a
3 min read
How to add gradients to your project using CSS ?
The Gradient in CSS is a special type of image that is made up of progressive &amp; smooth transitions between two or more colors. The gradient can be formed in 3 ways: Linear-gradient: It is an inbuilt function in CSS that is used to set the linear gradient as the background image.Radial-gradient: It is an inbuilt function in CSS that is used to s
6 min read
TensorFlow.js Training Gradients Complete Reference
TensorFlow.js is an open-source JavaScript library designed by Google to develop Machine Learning models and deep learning neural networks. TensorFlow.js Training Gradients Functions: TensorFlow.js tf.grad() FunctionTensorFlow.js tf.grads() FunctionTensorFlow.js tf.customGrad() FunctionTensorFlow.js tf.valueAndGrad() FunctionTensorFlow.js tf.valueA
1 min read
CSS Conic Gradients
CSS Conic Gradients is an inbuilt CSS function that is used to create a gradient with a color transition rotated at a center not radiated from the center. The conic gradient angle starts from 0 degrees – 360 degrees. Conic Gradients include pie charts and color wheels. The result of the conic-gradient() function is an object of the data type, which
2 min read
CSS Radial Gradients
CSS Radial Gradients is an inbuilt function of CSS that is used to create a progressive transition between two or more colors. It starts from the origin and its shape may be a circle or ellipse. By default, the first color starts at the center position of the element and then fades to the end color towards the edge of the element. Fade happens at a
2 min read
CSS Gradients
CSS gradients offer a powerful way to create visually appealing web elements by smoothly transitioning between two or more colors. As a web developer, understanding gradients is essential for crafting attractive and engaging user interfaces.  Types of GradientsThe Gradients can be categorized into 3 types: Linear GradientsRadial GradientsConic Grad
7 min read
Colors and gradients in bootstrap with examples
Bootstrap offers a wide range of predefined colors and gradients through utility classes, enabling easy customization of text, backgrounds, buttons, and other elements, enhancing visual appeal and consistency across web projects. Color in Bootstrap:Color in Bootstrap refers to the predefined color palette and utility classes provided for text, back
2 min read
HTML Canvas Basics
In this article, we will know HTML Canvas Basics, and their implementation through the examples. The HTML "canvas" element is used to draw graphics via JavaScript. The "canvas" element is only a container for graphics. One must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and addi
5 min read
How to resize an image in an HTML 5 canvas ?
The canvas element is part of HTML 5 and it allows the rendering of 2D shapes and bitmap(also called "raster") images. A canvas actually has two sizes: the size of the element. the size of the element's drawing surface. The element's width and height attributes set both the size of the element and the size of the element's drawing surface. CSS attr
1 min read
HTML canvas lineWidth Property
The HTML canvas lineWidth property is used to set or return the width of the line (thickness of the line). The width of the line is set in terms of pixels. The default value of this property is 1. Syntax: context.lineWidth = number; Property Values: number: This property value indicates the number which specifies the line width in terms of pixels.
2 min read