fillStyle property is used to sets or returns the color, gradient, or pattern to fill the drawing.
Syntax for fillStyle Property in HTML5 canvas:
context.fillStyle="value";
Property Values:
Value
Description
color
It is used to fill color to the shape. The default color is black that value is #000000.
gradient
This object is used to fill the shape from one color to another color. This object maybe linear or radial.
pattern
A pattern object is used to repeat the element in the specified direction. The default value is repeat, its repeats an object both horizontally and vertically.
Sample Coding for fillStyle Property in HTML5 canvas:
Tryit<!DOCTYPE html><html><head><title>Wikitechy HTML Canvas fillStyle</title></head><body><h1>HTML Canvas fillStyle</h1><canvas id="wikitechyCanvas" width="400"
height="250" style="border:1px solid blue;"></canvas><script>
var canvas = document.getElementById("wikitechyCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "green";
context.fillRect(100, 70, 170, 110);
</script></body></html>
Code Explanation for fillStyle Property in HTML5 canvas:
”wikitechyCanvas” is used to define the value id attribute for canvas element.
The getElementById(); method is used to get the element which has id as “wikitechyCanvas”.
a.getContext(“2d”) method is used to set a two-dimensional drawing context on the canvas.
Here “ctx.fillStyle=”green”;” is used to fill green color to the rectangle.
fillRect() method is used to draw a filled rectangle on the canvas.
Output for fillStyle Property in HTML5 canvas:
The output displays the rectangle filled with green color by fillStyle property.
The canvas rectangle with blue border.
Browser Support for fillStyle Property in HTML5 canvas:
