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
