---
title: fillStyle
framework: webkitjs
role: symbol
role_heading: Instance Property
path: webkitjs/canvasrenderingcontext2d/1633959-fillstyle
---

# fillStyle

A CSS color, a gradient, or a pattern used to fill shapes and text.

## Declaration

```data
attribute custom fillStyle;
```

## Discussion

Discussion This property can be set to any CSS color—for example “red”, rgb(255,0,0), #ff0000, or rgba(255,0,0,1). This property can also be set to a gradient object or a pattern object.

## See Also

### Filling and Stroking Lines and Paths

- [fill](webkitjs/canvasrenderingcontext2d/1631011-fill.md)
- [lineCap](webkitjs/canvasrenderingcontext2d/1629505-linecap.md)
- [lineJoin](webkitjs/canvasrenderingcontext2d/1629229-linejoin.md)
- [lineWidth](webkitjs/canvasrenderingcontext2d/1630379-linewidth.md)
- [miterLimit](webkitjs/canvasrenderingcontext2d/1631529-miterlimit.md)
- [stroke](webkitjs/canvasrenderingcontext2d/1634233-stroke.md)
- [strokeStyle](webkitjs/canvasrenderingcontext2d/1634470-strokestyle.md)

### Related Documentation

- [createRadialGradient](webkitjs/canvasrenderingcontext2d/1631480-createradialgradient.md)
- [createLinearGradient](webkitjs/canvasrenderingcontext2d/1630205-createlineargradient.md)
- [createPattern](webkitjs/canvasrenderingcontext2d/1628866-createpattern.md)