Easy Tutorial
❮ Att Input Size Att Input Height ❯

HTML canvas createLinearGradient() Method

HTML canvas Reference Manual

Example

Define a gradient from black to white (left to right) as the fill style for a rectangle:

JavaScript:


Browser Support

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the createLinearGradient() method.

Note: Internet Explorer 8 and earlier versions do not support the <canvas> element.


Definition and Usage

The createLinearGradient() method creates a linear gradient object.

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

Tip: Use this object as the value for strokeStyle or fillStyle properties.

Tip: Use the addColorStop() method to specify different colors, and where to position the colors in the gradient object.

| JavaScript Syntax: | context.createLinearGradient(x0, y0, x1, y1); | | --- | --- |

Parameter Values

Parameter Description
x0 The x coordinate of the gradient start point
y0 The y coordinate of the gradient start point
x1 The x coordinate of the gradient end point
y1 The y coordinate of the gradient end point

More Examples

Example

Define a gradient (top to bottom) as the fill style for a rectangle:

JavaScript:

Example

Define a gradient from black to red to white as the fill style for a rectangle:

JavaScript:


❮ Att Input Size Att Input Height ❯