How To draw HTML5 Canvas Path

HTML5 Canvas path tutorial

how to draw html5 Canvas Path using html5 Canvas

In this tutorial we will dicuss html5 Canvas Path.
In HTML5 canvas we cam draw path to construct different type of shapes.
Canvas has method for construction of rectangle and circle and arc.These method have limitation .Path give us flexibility.

Steps for drawing html5 Canvas Path

To Construct path four steps are taken

1. Creation of path

First of all we create path,for creating path beginPath() method is used.
code for creation of path is as following.


context.beginPath();

2. Construction of Path

At this stage different method for different type of path can be used.These method create various sub path and these path are joined to complete a big path.
method for construction of various type of path are

  • lineTo()
  • arcTo()
  • bezierCurveTo()
  • quadraticCurveTo()


3. Closing of path

After construction of path ,path is close.This method declare that path is complete.You can leave the closePath() method.It is optional method.

4. Path visibility

When path is complete.This can be shown on canvas by two method.If we want to fill the path then fill() method is used .If we want to stroke the path,thenstroke()method is use .
The code for filling or stroking the path will be.


context.stroke();
OR
context.fill();

How to draw triangle using html5 Canvas

for example drawing a rectangle with three vertex at point(240,25),(240,225) and(40,225) will be:
——————————————


context.strokeStyle ='#0000ff';
context.beginPath();
context.moveTo(240,25);
context.lineTo(240,225);
context.lineTo(40,225);
context.closePath();
context.stroke();


————————————–

How to draw filled triangle using HTML5 Canvas

If we want to draw filled triangle with vertices at (25,25),(225,25) and(25,225)
The code will be as given below.
—————————————————


context.fillStyle="#ff0000";
context.beginPath();
context.moveTo(25,25);
context.lineTo(225,25);
context.lineTo(25,225);
context.fill();

——————————————————-

HTML5 Canvas Path Complete code example

——————————————————-



<!DOCTYPE html>
<html>
    <head>
        <title>Drawing </title>
    </head>
    <body>
        <canvas id ="myCanvas" width ="600" height ="400"
            style="border: 1px solid blue;">
        </canvas>
        <script>
            var  canvas = document.getElementById("myCanvas");
            var context =canvas.getContext('2d');
            
                    // filled triangle

                        context.fillStyle="#ff0000";
                context.beginPath();
            context.moveTo(25,25);
                context.lineTo(225,25);
            context.lineTo(25,225);
            context.fill();

            // stroke triangle
            
            context.strokeStyle ='#0000ff';
                        context.beginPath();
            context.moveTo(240,25);
            context.lineTo(240,225);
            context.lineTo(40,225);
            context.closePath();
            context.stroke();
            
        </script>
    </body>
</html>

———————————————

HTML5 Canvas Path example in browsers

HTML5 Canvas Path tutorial

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.