This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.



An opaque object of the canvas API.


No properties.


Adds a new stop to a gradient. If offset is less than 0 or greater than 1 then an IndexSizeError exception must be thrown. If the color cannot be parsed as a CSS <color> value, then a SyntaxError exception must be thrown. Otherwise the gradient must have a new stop placed, at offset offset relative to the whole gradient, and with the color obtained by parsing color as a CSS <color> value.


No events.


The following code example creates a gradient.

<!DOCTYPE html>
  <title>Canvas gradient test</title>
    function draw() {
      var canvas = document.getElementById("MyCanvas");
      if (canvas.getContext) {  // check for support
        var ctx = canvas.getContext("2d");

        //create a gradient object from the canvas context
        gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);

        //Add the colors with fixed stops at 1/4 of the width.
        gradient.addColorStop("0", "magenta");
        gradient.addColorStop(".25", "blue");
        gradient.addColorStop(".50", "green");
        gradient.addColorStop(".75", "yellow");
        gradient.addColorStop("1.0", "red");

        //Use the gradient.
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, 300, 250);
        ctx.fillRect(250, 300, 600, 500);
<body onload="draw();">
  <canvas id="MyCanvas" width="600" height="500">This browser or document mode doesn't support canvas</canvas>


You can create a linear or radial CanvasGradient object by using the createLinearGradient or createRadialGradient method. A CanvasGradient object must have at least one color stop or the gradient is not visible.

Related specifications

W3C HTML Canvas 2D Specification
W3C Candidate Recommendation