HTML5 canvas allows you to fill paths and subpaths. The Fill Styles are used for this purpose and you can do it with the help of fillStyle command.

Example of how it is done in HTML5 is displayed below

<script>

    function fillExample(context) {

        context.fillStyle = '#662244'

        context.Fill

    }

</script>

It is also possible to set gradient for your fill color or image pattern. Make sure that while you applying fill styles, all you paths and subpaths are closed.

There is one important point that you need to be aware of. In order for you to make your fill crisp, you need to apply fill style before stroking the path. Otherwise, your fill will overlap with your path border images and will be little bit blurry.

Fill Styles work with other objects besides paths and subpaths. They work with rectangles too. In order to fill in rectangle object we need to set fill style first and they call on fillRect command as shown in the example below

<script>

    function fillExample(context) {

        Context.fillStyle = '#553322'

        Context.fillRect(-1, -10, 1, 10)

    }

</script>

As you can see from the example above, we fill in rectangle which we defined with our coordinates and then filled it with the help of fillStyle command.

In case you need to clear rectangle, you can always call of clearRect command. This is mostly used if you want to create animation on your canvas.