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
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
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 .
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.