1 out of 1 rated this helpful - Rate this topic

fillStyle property

Gets or sets the current style that is used to fill shapes.

Syntax

JavaScript	`p = object.fillStyle`

Property values

Type: Variant

The fill style, as specified by one of the following values:

CSS color: A string that contains a CSS color value to create a solid color fill (for example, blue, red, or black).
Gradient: A CanvasGradient object to create a gradient fill.
repeat-y: A CanvasPattern object to create a pattern fill.
no-repeat: The pattern prints only once and does not repeat.

Exceptions

Exception	Condition
SecurityError	The p attribute is set to an CanvasPattern object that was created from a img or video element that is not of the same origin or domain as the document that owns the canvas element.

Standards information

HTML Canvas 2D Context, Section 5

Remarks

Invalid values are ignored.

Examples

The following code example shows filling rectangles with a linear gradient and a solid color.

HTML


<html>
<head>
  <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;
              // Now fill with a solid color
              ctx.fillRect(0, 0, 300, 250);
              ctx.fillStyle = "blue";
              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