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.

• 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