CanvasGradient object

Specifies an object that represents a color gradient fillStyle on a CanvasRenderingContext2D object.

HTML Canvas 2D Context, Section 1Internet Explorer 9



The CanvasGradient object has these types of members:


The CanvasGradient object has these methods.


Adds the specified colors and the position in a CanvasGradient object.


Standards information


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.

Note  If you are developing on an intranet and have rendering issues for HTML5, you can add a "meta http-equiv-'X-UA-Compatible' content= " meta command, followed by "IE=edge" to the <head> block of a webpage to force Windows Internet Explorer to use the latest standards. Remove this meta tag when you deploy the page on a server. For more information about document compatibility, see Defining Document Compatibility.


The following code example creates a gradient made up of 5 sections of the rainbow. When you click the button, it rotates the colors by shifting the first color in the array to the end of the array. See example live online.

<!DOCTYPE html>
    <title>Canvas gradient test</title>
  <h1>Canvas gradient test</h1>
  <button id="mybutton">Change colors</button>
  <canvas id="MyCanvas" width="600" height="500"> This browser or document mode doesn't support canvas</canvas>
    var canvas = document.getElementById("MyCanvas");
    if (canvas.getContext) {  // check for support
      var ctx = canvas.getContext("2d");
      var gradArray = ["red","purple","blue","green","yellow","orange"];
      var gradient;
      var temp;

      doGradient();  // get an initial color set on the screen

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

        // Add the colors with fixed stops at 1/5 of the width.
        gradient.addColorStop("0", gradArray[0]);
        gradient.addColorStop(".20", gradArray[1]);
        gradient.addColorStop(".40", gradArray[2]);
        gradient.addColorStop(".60", gradArray[3]);
        gradient.addColorStop(".80", gradArray[4]);
        gradient.addColorStop("1.0", gradArray[5]);

        // Use the gradient.
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, 300, 250);
        ctx.fillRect(250, 300, 600, 500);

    document.getElementById("mybutton").addEventListener("click", animate, false);
    function animate() {
      // rotate the colors by shifting off the bottom of the array,
      //  and pushing it to the top
      temp = gradArray.shift();
      doGradient();  // redisplay


See also