HTML5 Canvas Reference - createLinearGradient()

Linear gradients come in three basic styles: horizontal, vertical, and diagonal.

We control where colors change in our gradient by setting color stops at points along the length of the object we want to fill.

The createLinearGradient() method creates a linear gradient object.

We can then assign the gradient color to the strokeStyle or fillStyle properties to fill or draw shapes such as rectangles, circles, lines, text, etc.

The addColorStop() method adds the different colors, and position the colors in the gradient object.

Browser compatibility


`createLinearGradient()`	Yes	Yes	Yes	Yes	Yes

Javascript Syntax

context.createLinearGradient(x0,y0,x1,y1);

Parameter Values

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

The four parameter values in the createLinearGradient method call are the top-left x and y coordinates to start the gradient, as well as the two bottom-right points to end the gradient.

var  gr  = context.createLinearGradient(0,  0,  100,  0);
// Add the   color stops. 
gr.addColorStop(0,'rgb(255,0,0)'); 
gr.addColorStop(.5,'rgb(0,255,0)'); 
gr.addColorStop(1,'rgb(255,0,0)');
// Use the gradient
fillStyle.context.fillStyle  = gr; 
context.fillRect(0,  0,100,100);

Our example starts at 0,0 and goes to 100,0.

The y values are set to 0 when we create a horizontal gradient.

The x values are set to 0 when we create a vertical gradient.

After we have defined the size of our gradient, we then add in color stops that take two parameter values.

The first is a relative position origin point along the gradient to start with color, and the second is the color to use. The relative position must be a value from 0.0 to 1.0:

gr.addColorStop(0,'rgb(255,0,0)'); 
gr.addColorStop(.5,'rgb(0,255,0)'); 
gr.addColorStop(1,'rgb(255,0,0)');

Example

The following code creates a gradient color from white to black.


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
<!--  w  w w  .j av a2 s .  c  o m-->
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");

    gradient = ctx.createLinearGradient(0, 0, 0, c.height);
    gradient.addColorStop(0, '#ffffff');
    gradient.addColorStop(1, '#000000');  
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, c.width, c.height);

</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code adds more color stops to the


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
<!--from   w  w w.  j a v a2s .c o  m-->
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");

    var grd=ctx.createLinearGradient(0,0,200,0);
    grd.addColorStop(0,"red");
    grd.addColorStop(0.15,"yellow");
    grd.addColorStop(0.3,"green");
    grd.addColorStop(0.45,"aqua");
    grd.addColorStop(0.6,"blue");
    grd.addColorStop(0.7,"fuchsia");
    grd.addColorStop(1,"red");
    // Fill with gradient
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);

</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code uses gradient color to fill an arc.


<!DOCTYPE html>
<html>
<body>
<canvas id="myctx" width="300" height="150"></canvas>
<script>
<!--from  w ww  .  j  a v  a 2s  .com-->
    var c = document.getElementById("myctx");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(340,140,100,0, 2 * Math.PI, false);
    ctx.strokeStyle = 'lightblue';
    var grad = ctx.createLinearGradient(340,14,360,160);  //(x0,y0) to (x1,y1)
    grad.addColorStop(0,'red');
    grad.addColorStop(1,'yellow');
    ctx.fillStyle = grad;
    ctx.fill();
    ctx.stroke();

</script>
</body>
</html>

The code above is rendered as follows: