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:

fillStyle Property in HTML5 canvas Code Explanation

”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.