Using HTML5 Stroke Styles

HTML5 provides with new styling capabilities when it comes to canvas. We can improve the way lines are drawn on canvas with the help of stroke styles. The HTML5 stroke styles are used to modify properties of the context to make our shapes look more users friendlier. 

See example below for simple representation of Stroke Styles


                function contextExample(context)    


                    context.lineWidth = 10;

                    context.lineJoin = 'round'

                    context.strokeStyle = '#881199'




As you can see , all that we did before stroking, we  applied properties to change appearance. We did this by increasing size to 10, making it round coroners and applying color to the stroke. This allows us to draw more appealing lines, object on HTML5 canvas. There are additional properties available for us in HTML5 that can help style strokes. They will be covered in other tutorials on HTML5 development.

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 …