How to set line attributes using html5 canvas

In this html5 Canvas tutorial we will discuss what are different attributes of html5 Canvas.How we can set line attributes using html5 Canvas

html5 canvas line attributes tutorial

How to set line attributes using html5 canvas

HTML5 Canvas Line Attributes

  1. fillStyle
  2. strokeStyle
  3. lineWidth
  4. lineJoin
  5. lineCap


Line can be of two types, solid line and outline.
color of solid line is set with fillStyle attribute of line.
The code for setting fillStyle of line Will be.


fillStyle takes three types of fillvalue. Solid color,gradient and Pattern.
If we draw a outline of line instead of solid line,then to set color of line we use strokeStyle attribute of line.To set strokeStyle of line the code will be

Context.strokeStyle =strokecolorvalue

strokeStyle can take three types of values simplecolor or gradient or pattern.
To set width of line html5 canvas use lineWidth attribute.
The code for setting width of line will be.

Context.lineWidth = value

This value is a number which represent how many pixels takes the width of line.


When two line meets , they create a corner, there are three types of corner, bevel,round and miter

To set a lineJoinhtml5 canvas use the following code.

context.lineJoin = value

lineJoin can take three types of values.

  • bevel
  • miter
  • round


The starting and ending point of line are called lineCap.
HTML5 Canvas uses three types of values to set lineCapof line.
The code for set lineCap attributes of line is given.

context.lineCap =value

The value for lineCap attribute can be of three types.

  • butt
  • round
  • square


HTML5 Canvas Line Attributes complete code example


<!DOCTYPE html>
        <title>html5 canvas line attributes </title>
        <canvas id ="myCanvas" width ="600" height ="400" style="border: 1px solid blue;" >
            var  canvas = document.getElementById("myCanvas");
            var context =canvas.getContext('2d');
        //set line width 
        context.lineWidth= 30;
        // set stroke style blue
        context.strokeStyle ="#0000ff";
        //set lineCap round
        context.lineCap ="round";
        // set line join bevel
        context.lineJoin    = 'round';
        // start of drawing  
        // start point of first line
         // end point of first line and start point of line second
         //end point of second line
         //draw line and make visible
        // close of  drawing.



HTML5 Canvas line attributes

html5 Canvas line attributes
lineattributes using html5 canvas

Author: Habibullah Qamar

Its me Habib Ullah Qamar working as a Lecturer (Computer Sciences) in Pakistan. I have an MS(M.Phil) degree in computer sciences with specialization in software engineering from Virtual University of Pakistan Lahore. I have an experience of more than 15 years in the filed of Computer Science as a teacher. Blog Writing is my passion. I have many blogs, This one is special made with the aim of providing 100% Free online coaching and training to the students of under-graduate and postgraduate classes. Most of the students enrolled in computer sciences, information technology, software engineering and related disciplines find it difficult to understand core concepts of programming and office automation. They find difficult in understanding and solving their assignments.