HOME HTML CSS XML JAVASCRIPT ASP PHP SQL MORE...

HTML5 Tutorial

HTML5 Home
HTML5 Introduction
HTML5 New Elements
HTML5 Video
HTML5 Video/DOM
HTML5 Audio
HTML5 Drag and Drop
HTML5 Canvas
HTML5 SVG
HTML5 Canvas vs. SVG
HTML5 Geolocation
HTML5 Web Storage
HTML5 App Cache
HTML5 Web Workers
HTML5 SSE

HTML5 Forms

HTML5 Input Types
HTML5 Form Elements
HTML5 Form Attributes

HTML5 Reference

HTML5 Tags
HTML5 Attributes
HTML5 Events
HTML5 Audio/Video
HTML5 Canvas 2d
HTML Valid DTDs

HTML5 canvas createLinearGradient Method

HTML5 track Tag Reference HTML5 canvas reference

Example

Draw a rectangle with a red and green gradient filling:

JavaScript:

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
var grd=ctx.createLinearGradient(0,0,150,0);
grd.addColorStop(0.3,"red");
grd.addColorStop(0.7,"green");
ctx.fillStyle=grd;
ctx.fillRect(0,0,150,100);

Try it yourself »

Definition and Usage

The createLinearGradient method creates a gradient object that changes from one color to another.

You can specify how and where these changes will take place, using the coordinate parameters.

The x0 and y0 parameters represents the start coordinates of the gradient.

The x1 and y1 parameters represents the end coordinates of the gradient.

Use the addColorStop() method to specify a color, and where to position the color in the gradient.

The gradient can be used to draw/fill rectangles, circles, lines etc.

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

Browser Support

The createLinearGradient method is supported in all major browsers.

Parameter Values

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