YouTipProp Canvas Fillstyle
[ Canvas Object](#)
## Example
Define a rectangle filled with red:
Yourbrowserdoesnotsupportthecanvastag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(20,20,150,100);
[Try it »](#)
* * *
## Browser Support
The fillStyle property is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
**Note:** Internet Explorer 8 and earlier versions do not support the element.
* * *
## Definition and Usage
The fillStyle property sets or returns the color, gradient, or pattern used to fill drawings.
| Default Value: | #000000 |
| --- |
| JavaScript Syntax: | _context_.fillStyle=_color_|_gradient_|_pattern_; |
## Property Values
| Value | Description |
| --- | --- |
| _color_ | A (#) indicating the fill color of the drawing. The default value is #000000. |
| _gradient_ | A gradient object ((#) or (#)) used to fill the drawing. | |
| _pattern_ | A (#) object used to fill the drawing. | |
* * *
## More Examples
## Example
Define a gradient from top to bottom, used as the fill style for a rectangle:
Yourbrowserdoesnotsupportthecanvastag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
[Try it »](#)
## Example
Define a gradient from left to right, used as the fill style for a rectangle:
Yourbrowserdoesnotsupportthecanvastag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
[Try it »](#)
## Example
Define a gradient from black to red to white, used as the fill style for a rectangle:
Yourbrowserdoesnotsupportthecanvastag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
[Try it »](#)
## Image used:
## Example
Use an image to fill the drawing:
YourbrowserdoesnotsupporttheHTML5canvastag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();
[Try it »](#)
* * Canvas Object](#)