html5 Canvas tutorial :Structure of html5 canvas element

html5 Canvas tutorial :Structure of html5 canvas element

Html5 Canvas element has following structure.

<canvas id="myCanvas"  height= "200" width="200"  style="border: 1px solid #0000ff;">
</canvas>

First thing first: id="myCanvas"
we have given a idto this canvas. We will use this id when we use Javascript to draw our graphics on the canvas. A page can have more than one canvas, so unique id will serve our purpose of distinction between various canvas elements.If we have two canvas on a page.we will write code for these as.
==================
Code for Canvas 1
=================

<canvas id="canvas_1" width="200" height="200"  style="border : 1px solid #0000ff;">
</canvas>

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

Code for canvas 2
=============

<canvas id="canvas_2" width="200" height="200" style="border : 1px solid #0000ff; ">
</canvas>

Our browser will show two rectangles of 200px wide and 200px length.

============================================
Two canvas element embed in one page
===========================================

---------------------------------------------------------------------------------------

Second thing in canvas is width="200".This part of code set the width of our canvas . Width is the attribute of canvas and 200 is value of width.We always write attribute of HTML element in general form

attributeName ="value"

Value can be any amount which this attribute can have. This can be number, text etc.Remember value is written always in inverted coma
width= 200not correct. width ="200" is correct style.
The third thing in our canvas tag is

length="200"

This attribute of length set the length our canvas element,"200" represent 200 pixels.
Our last important thing is:

style ="border 1px solid #0000ff;"

In this line style is used to set style of our html element. This style is for use of CSS .CSS means cascading style sheet. For detail read tutorial about css.
The value for style is "border 1px solid #000ff;"
In this line border is used to draw border around a specific element. Here we are using border along canvas element.1px means that this border will be 1px wide. You can set different value for border and check the result. solid is style of border. Border can have different styles such as dotted, solid, double, inset, outset, groove and ridge
then there is something #0000ff
This is color for border. Color can be represent by different way. You can set name of color such as red ,green ,blue.
In RGB format, six hexadecimal digits are used to represent the value of color. Here R stands for Red ,G for Green and B for Blue.

First two digits are for Red, next two digits represent Green color value and last two digits represent Blue color value. Any color can take value from 0 to 255.With these combination of three colors we can create millions of colors. In hexadecimal these value will be from 00 to ff. The semicolon is used to end the statment
=============================================================

html5 canvas tutorials live demo on codepen

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

<canvas  id="myCanvas" width="600" hight ="400">
  
</canvas>
<canvas  id="myCanvas2" width="600" hight ="400">
  
</canvas>

See the Pen pvVjYv by aslam (@aslamwaqar) on CodePen.

--------------------------------------------------------------------------------------------------

For further reading visit

www.html5canvastutorials.com

html5 canvas tutorial drawing a simple line using html5 canvas

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: x1

: x coordinate of start of line
2:y₁: y coordinate of start of line
General form of moveTo method is: moveTo(x1,y1) where x₁ stands for x coordinate of starting point of line and y₁ stands for y coordinate of starting point of line example of moveTo method is
moveTo(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. x₂: x coordinate of closing point of line 2. y₂: y coordinate of closing point of line. General form of method will be:
lineTo(x2,y2);
where x₂ stands for x coordinate of closing or second point of line and y₂ 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);

There is a problem with this code.line will not be visible on the canvas .To make line visible we use the method 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>

We will save this html document as
canvas-line.html
when 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>

See the Pen KwRVgV by aslam (@aslamwaqar) on CodePen.

html5 canvas tutorials: html5 canvas introduction

html5 canvas tutorial:  introduction

<canvas>
Canvas is a new tag of html introduced in HTML5.As you know all html tags are container , canvas is container for HTML graphics. We can draw graphics such as line,boxes,circle and other shapes on HTML page in canvas
Canvas element has start and close tag .We write canvas element as

<canvas>
</canvas>


Between these two tags our graphics are drawn .Canvas has two attributes height and length.These attribute set the size of canvas on HTML page. Actually we use JavaScript methods (API) to draw graphics. Simplest page with canvas element will be.

how to embed html5 canvas tag in html5 document

    <!DOCTYPE html&gt
    <html>

        <head&gt

            <title&gt

               HTML Canvas  example

            </title>

        </head> 
    
        <body>


          <canvas id ="myCanvas" width ="200" height ="200">

          </canvas >

    
        </body>

    </html>

Save this document as
mycanvas.html
when we see this document in browser .we will see a blank page. Dont worry our canvas is present but hidden. To see canvas we will add style to our canvas. We will modify our Canvas tag as

<canvas width ="200" height ="200" style="border: 1px solid #0000ff;">
</canvas>

Our HTML document in modified form will be.

Modified HTML Document

    <!DOCTYPE html>

    <html>

        <head>

            <title >

             HTML canvas example 

            </title>

        </head>

 
        <body>

            <canvas height="200" width="200" style="border:1px solid #0000ff;>




            </canvas>

        </body >

    </html>

save this page ,and refresh your browser.

Congratulation !
Our canvas in blue color rectangle is present in our web page. We have now canvas and we can draw

second lesson: conversion from html to html5

To convert a html document into html5 document.We need only one line
We add this one line at the top of our previous document. The line is. <!DOCTYPE html>
Our updated  helloworld document will be as:

<!DOCTYPE html>
    <html>
        <head>
        </head>
        <body>
            hello world html5
        </body>
    </html>

This line <!DOCTYPE html> inform the browser that the document is valid html5 document

live demo on codepen

<html>
        <head>
        </head>
        <body>
            hello world html5
        </body>
    </html>

See the Pen bNMVPy by aslam (@aslamwaqar) on CodePen.

first lesson html5canvas

html5 canvas first tutorial

html is the standard language for presenting content on the world Wide web. we want to show "hello World " on a web page ,then html is responsible for presentation of content.If we want to give some style to "hello world" then we use CSS.
CSS is the language for styling of the content.If we want to animate"hello world" then we use javascript. in brief words: html for content css for style javascript for functionalityhtml consist of some tages. these tags are used to handle data.These tags are  Every web page is enclode in html tag.HTML tag  following structure.

Every web page can be considered a big carton, whose label is html.In this 

carton,there are two major cartons in html carton.these are head and 



HEAD
Head   container can conatins other container.Such as title, link,script,meta tags .

In head section things are hidden .

they are not visible in browser except title which is shown on browser  bar.
BODY
Body tag is responsible for presentation of data.It can contain many other tags or

 containers.
Simple Web Page Structure:
Simplest web page will contain following tags and structure.


Every web page is saved with .html extension. If we save our page with the name

 helloworld. we will give it extension helloworld.html. After saving the file, 

 we can open it in web clicking the file,we can open web page by writing the

 address  of  file  in web browsers.
If file address is  
C:\Webpages\helloworld.html. 
then we will write  
C:\webpages\helloworld.html


In address bar of browser. we will see "helloworld" .web page  in  our browser

 window.



live demo on codepen




<html>
  <head>
  </head>
  <body>
    Hello World 
  </body>
 </html>
See the Pen ByxQGw by aslam (@aslamwaqar) on CodePen.