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.

fillStyle

Summary

The current style used to fill shapes. The style can be a CanvasGradient, a CanvasPattern, or a string containing a CSS color.

Property of apis/canvas/CanvasRenderingContext2Dapis/canvas/CanvasRenderingContext2D

Syntax

var result = CanvasRenderingContext2D.fillStyle;
CanvasRenderingContext2D.fillStyle = value;

Return Value

Returns an object of type ObjectObject

Default is black.

Examples

The following example creates a square with different colored squares inside.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  for (i=0;i<6;i++){
    for (j=0;j<6;j++){
      ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
                       Math.floor(255-42.5*j) + ',0)';
      ctx.fillRect(j*25,i*25,25,25);
    }
  }
}

Related specifications

W3C HTML Canvas 2D Specification
W3C Candidate Recommendation

Attributions

  • This article contains content originally from external sources, including ones licensed under the CC-BY-SA license. cc-by-sa-small-wpd.png

  • Portions of this content copyright 2012 Mozilla Contributors. This article contains work licensed under the Creative Commons Attribution-Sharealike License v2.5 or later. The original work is available at Mozilla Developer Network: Article

  • Microsoft Developer Network: Windows Internet Explorer API reference Article