how to draw a line using html5 canvas
We can draw lines and other shapes on canvas.line is the simplest element of graphic.Any shape can be drawn by line .There are many type of lines.In our present html5 canvas tutorial we will draw a straight line.Any line can have minimum two points. one point is starting of line and other is the closing of line.In canvas we use
moveTo() method .This method takes two argument:
1: x
2:y1: y coordinate of start of line
General form of moveTo method is:
moveTo(x1,y1)
where x1 stands for x coordinate of starting point of line and y1 stands for y coordinate of starting point of line
example of moveTo method ismoveTo(100,150);After setting the starting point of line, we set closing point of line ,in other words second point of line.For this purpose we use the
lineTo() method.This method takes two argument :
1. x2: x coordinate of closing point of line 2. y2: y coordinate of closing point of line. General form of method will be:
lineTo(x2,y2);where x2 stands for x coordinate of closing or second point of line and y2 stands for y coordinate of closing or second point of line. Example of
lineTo() method is:
lineTo(500,50);For start of any path we use method
beginPath()which has folowing structure
context.beginPath();After declaring canvas and context object ,the line drawn the line from point
(100,150) to (500,50).
the code for the drawing line using html5 canvas
context.beginPath();
context.moveTo(100,150);
context.lineTo(500,50);
stroke().
we will write the code for visibility of line
context.stroke();FULL CODE OF DRAWING LINE ON CANVAS.
<!DOCTYPE html>
<html>
<head>
<title>
Drawing a line on canvas
</title>
</head>
<body>
<canvas id ="myCanvas" width="600" height ="200" >
</canvas>
<script>
// declare canvas and context variable for drawing
var canvas =document.getElementById("myCanvas");
var context = canvas.getContext('2d');
//start to draw
context.beginPath();
//start of line:first point
context.moveTo(100,150);
// end of line : second point
context.lineTo(500,50);
// set line width and color of line
context.lineWidth=10;
context.strokeStyle="blue";
// make line visible
context.stroke();
</script>
</body>
</html>
canvas-line.htmlwhen we see the html document in browser .We will see the follwing shape of line.
html5 canvas tutorial drawing smple line using html5 canvas
html5 canvas tutorial drawing simple line using html5 canvas live demo on codepen
<html>
<head>
<title>
Drawing a line on canvas
</title>
</head>
<body>
<canvas id ="myCanvas" width="600" height ="400" >
</canvas>
</body>
</html>
No comments:
Post a Comment