html tutorial - fillStyle Property in HTML5 Canvas - html5 - html code - html form

Learn html - html tutorial - fillStyle Property in HTML5 Canvas - html examples - html programs
- The fillStyle is a property of <canvas> element.
- 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:
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
Yes | 9.0 | Yes | Yes | Yes |