Canvas Create Linear Gradients

Last Updated:

How to Create a Linear Gradient

Your browser does not support the canvas element.

To create a linear gradient, follow these steps

  1. canvas - Assigning the canvas element to a variable.
  2. ctx - Assigning the 2d rendering context to another variable by calling the getContext('2d') method.
  3. grad - Creating a new CanvasGradient object using createLinearGradient() canvas method, then assigning it to a variable.
  4. addColorStop() - Use addColorStop() canvas method to add a new color stop, defined by an offset and a color.
  5. fillStyle - Use fillStyle canvas property to specify the gradient to use inside shapes (any shape).
  6. fillRect() - Use fillRect() canvas method to draws a rectangle that is filled according to the current fillStyle.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <canvas id="point" width="210" height="110"> Your browser does not support the canvas element. </canvas> <script> var canvas = document.getElementById("point"); var ctx = canvas.getContext("2d"); // Create gradient var grad = ctx.createLinearGradient(0, 0, 200, 0); grad.addColorStop(0, "black"); grad.addColorStop(1, "gold"); // Fill with gradient ctx.fillStyle = grad; ctx.fillRect(0, 0, 200, 100); </script> </body> </html>

Syntax

ctx.createLinearGradient(x0, y0, x1, y1)

Attributes Value

ValueExplanation
x0 Specifies the x-axis coordinate of the start point.
y0 Specifies the y-axis coordinate of the start point.
x1 Specifies the x-axis coordinate of the end point.
y1 Specifies the y-axis coordinate of the end point.

Share this Page

Meet the Author