HTML5 Canvas drawing line using html5 canvas

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

==============================

Cartesian Coordinates on 2d plane
Cartesian Coordinates on 2d plane

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]

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.

Leave a Reply

Your email address will not be published. Required fields are marked *