HTML5 Fill Styles

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


                function fillExample(context) {

                    context.fillStyle = '#662244'




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


                function fillExample(context) {

                    Context.fillStyle = '#553322'

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



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.

Featured pages


Learn about HTML5 architecture, design principles and patterns on HTML5 Overview Tutorial. Become …


Learn about HTML5 tags and discover a new list of HTML5 tags. Find out about HTML5 tags support by…


 Learn HTML5 development techniques, tips and tricks on our website. Find out what is required…

Date Time Picker

HTML5 forms use date and time controls regularly. HTML5 date and time controls are used by booking …