HTML reference manual

Complete list of HTML tags

HTML canvas createLinearGradient() method

The createLinearGradient() method creates a gradient along the line specified by the parameters. This method returns a linear CanvasGradient object.

HTML canvas reference manual

Online Example

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

Demonstration of the usage of the createLinearGradient() method:

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas createLinearGradient() method usage (Basic Tutorial Website oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d);
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0, "red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>

Test to see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, 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, and more.

Tip:Please use the object as strokeStyle or fillStyle the value of the property.

Tip:Please use addColorStop() The method specifies different colors and where to locate the colors in the gradient object.

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

Parameter Value

Parameter	Description
x0	X coordinate of the gradient start point
y0	Y coordinate of the gradient start point
x1	X coordinate of the gradient endpoint
y1	Y coordinate of the gradient endpoint

More Examples

Online Example

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

Demonstration using JavaScript:

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas createLinearGradient() method usage (Basic Tutorial Website oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d);
var my_gradient = ctx.createLinearGradient(0, 0, 0,170);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>

Test to see ‹/›

Online Example

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

Demonstration of the usage of the createLinearGradient() method:

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas createLinearGradient() method usage (Basic Tutorial Website oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d);
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(0.5,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>

Test to see ‹/›

HTML canvas reference manual

HTML: <template> tag