What steps necessary for drawing line using html5 canvas.These steps are necessary for drawing line using html5 canvas. HTML5Canvas drawing line. HTML5 Canvas drawing line tutorial. HTML5 Canvas tutorial : Here are Steps for drawing line in html5 canvas.
var canvas = document.getElementById("myCanvas");
STEP SECOND: Create a Drawing Object using html5 canvas
After selecting the canvas element, we need drawing object for the canvas.
HTML has a built-in object canvas context.
we use canvas method getConText("2d"):
Code for this purpose is
var context = canvas.getContext("2d");
STEP THREE: Set the Style of drawing using html5 canvas
As on original canvas, when we decide to draw somthing, first we select the color and brush for drawing.
Same is the case of html5 canvas, we select the filling color of shape. code for color selection for filling the shape is
context.fillStyle ="#FFOOOO";
Here we have used red color for drawing. We can use CSS color, a gradient ,or a pattern.If we do not select color. canvas default color for drawing is black(#000000).
For drawing only outer boundary of shape we use method strokeStyle() for selection color of outer line of shape.
code for selection of stroke color will be .
context.strokeStyle ="#0000ff";
Default strokeStyle is #000000 (black).
STEP four: Set position of shape using html5 canvas
Now after selection of fill color the next most important point is where we want to draw.
Canvas use “2d” context for drawing. we are familiar with 2d from our elementary classes.
In geometry we use Cartesian coordinate plane for 2d.In which
x -axis represent horizontal axis and y-axis represent vertical axis.
x and y have 0 values at the center of Cartesian plane. From zero to right ward direction value of x increases such as 1,2,3,4,….
On the right side value of x decreases from zero to -1,-2,-3.
x-axis ia positive in right ward from center of plane and x -axis is negative towards left hand side from center of plane.
Value of y increased in upward direction from center of plane such as 0,1,2,3,..
Value of y decreases in downward direction from 0 to -1,-2,-3….
You can see Cartesian plane in following figure.
==============================
Cartesian coordinates
==============================
Canvas coordinates
Canvas coordinate system is different from Cartesian coordinate system. In canvas the origin is at the upper left corner of the canvas. X coordinates increases in right direction and Y coordinates increases in downward direction.The canvas coordinate system is given in the following figure.
==================================================================
Canvas coordinates
==================================================================
Drawing a simple line on using html5 canvas
Now you have clear idea about Canvas coordiantes. It is time to start our actual work for this tutorial, drawing a simple line using html5 canvas.
For drawing a simple line on canvas, we will break our work in brief sections
Section 1: set up html5 canvas for drawing a simple line using html5 canvas
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
Section 2: drawing a simple line using html5 canvas
Part 1: Declaring start of drawing
context.beginPath();
Part 2: Set the first point of line(starting point of line)
context.moveTo(50,50)
Part 3: Set the second point of line (ending point of line)
context.lineTo(450,450);
Part 4: Make line visible using html5 canvas
context.stroke();
Html5canvas tutorials drawing a simpleline Complete code example
<!DOCTYPE html>
<html>
<head>
<title>
Drawing a simple line on canvas
</title>
</head>
<body>
<canvas id ="myCanvas" width ="600" height ="500">
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context =canvas.getContext('2d');
context.beginPath();
context.moveTo(50,50);
context.lineTo(450,450);
context.stroke();
</script>
</body>
</html>
when you save the above file by name
canvas-simple-line.html
and see in the browser you will see the result.
—————————–
html5 tutorials drawing a simple line usinghtml5 out put in browser
—————————–
==============================================================
html5 Canvas tutorials draw simple line(live demo on codepen)
==============================================================
[codepen_embed height=400 theme_id=1 slug_hash=’KwmGMa’ user=’aslamwaqar’ default_tab=’html’ animations=’run’]
[/codepen_embed]
