1 out of 2 rated this helpful - Rate this topic

addColorStop method

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

Syntax

var retval = CanvasGradient.addColorStop(offset, color);

Parameters

offset [in]

Type: Floating-point

A floating point value between 0.0 and 1.0 that represents the position between the start and end points in a gradient.

color [in]

Type: string

A CSS color string to display at the position that the offset parameter specifies.

Return value

Type: HRESULT

If this method succeeds, it returns S_OK. Otherwise, it returns an HRESULT error code.

Standards information

HTML Canvas 2D Context, Section 5

Remarks

You can call the addColorStop method multiple times to change a gradient. If you never call this method for CanvasGradient, the gradient is not visible. You need to create at least one color stop to have a visible gradient.

Examples

The following code example creates a gradient.

HTML


<html>
<head>
  <title>AddColorStop example</title>
    <style type="text/css">
        #MyCanvas {
        border:1px solid black;
        }

    </style>
  <script type="text/javascript">
      function draw() {
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              var ctx = canvas.getContext("2d");
              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);
          }
      }
  </script>
</head>
<body onload="draw();">
  <canvas id="MyCanvas" width="600" height="500">This browser or document mode doesn't support canvas</canvas>
</body>
</html>

Community Additions

ADD