learnhtml5canvas: January 2015

Thursday, 8 January 2015

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.

Monday, 5 January 2015

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.

Friday, 2 January 2015

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.