Total Pageviews

Thursday, April 16, 2015

HTML5 Canvas Basic Tutorial

HTML5 Canvas, HTML5 Canvas Tutorial, HTML5 Canvas Tutorial step by step, canvas basic , canvas example to draw circle, canvas example to draw line, canvas example to draw rectangle,fill canvas example

The canvas element is an element defined in HTML5 code using width and height attributes

 It allows bitmap (2D) drawing which is controlled using JavaScript 

 The HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).

 

Browser support  Following latest Browser

To Learn Canvas you Must Know JavaScript  

How to find wether your browser support convas or Not :

Execute following code if message display

your browser doesn't support canvas! 

Code :

<canvas id="myCanvas" width="500" height="300">
  your browser doesn't support canvas!
</canvas>

 Canvas Tag :

 we are going to defined canvas tag as follows (it is paired tag)

 <canvas id="mycanvas" height="500px" width="500px">

</canvas>


HTML Code  SAVE as Basic.html

<!DOCTYPE html>
<html>
<body>
    <canvas id="myCanvas" width="200" height="100" >
          Your browser does not support the HTML5 canvas tag.
    </canvas>
</body>
</html>

in this code we are going to use three attributes of canvas that is id, height and width .

if you execute this code using browser it display nothing .it is because canvas tag provide only container or area to draw graphics . 

 

 What is canvas Element : 

it is a tag which provide a area to draw 2D graphics .

Remember To Draw graphics on canvas it should be accessible to access it give unique id to it as shown in code i have used <canvas id="myCanvas " >  

By using this id using javascript you can draw graphics on the canvas 


 

To identify Canvas element you can use CSS or style tag property such as border, background-color  

Code

<!DOCTYPE html>
<html>
    <head>
    <style>
    #myCanvas{

                         border:2px solid black;
                         background-color:pink;

                         }
    </style>
</head>
<body>   
<canvas id="myCanvas" width="200" height="100" >   
     Your browser does not support the HTML5 canvas tag. 
  </canvas>
</body>
</html>

Output:


you can also use external CSS to control Style of your canvas Element .


Lets we take 

Basic canvas example to draw circle with explanation of each step .

i am using same HTML and css previous code just i need 500px height and width as well as i am going to use JavaScript code to draw circle shown below in code.

<!DOCTYPE html>
<html>
    <head>
    <style>
    #myCanvas{

                         border:2px solid black;
                         background-color:pink;

                         }
    </style>
</head>
<body>   
<canvas id="myCanvas" width="500" height="500" >   
     Your browser does not support the HTML5 canvas tag. 
  </canvas>

    <script>
      var c=document.getElementById("myCanvas");
       var ctx=c.getContext("2d");
        ctx.arc(100,70,50,0,2*Math.PI);
       ctx.stroke(); 

</script>
</body>
</html>

Output:

Lets Understand JavaScript code step by step

code is 

<script>
      var c=document.getElementById("myCanvas");
       var ctx=c.getContext("2d");
        ctx.arc(100,70,50,0,2*Math.PI);
       ctx.stroke(); 

</script>

 ______________________________ 


 1. var c=document.getElementById("myCanvas");

  to understand this line lets see our tag

<canvas id="myCanvas" width="500" height="500" >   
     Your browser does not support the HTML5 canvas tag. 
  </canvas>

we will get reference of our canvas in variable c so that we can use it to draw graphics.

 2.var ctx=c.getContext("2d"); 

getContext() method return object ctx which makes properties  and methods available to use in our program. 

by using ctx.  we can use avilable canvas method to draw shapes  

examples are 

To Draw Circle  We will use

 ctx.arc(x, y, r, srart_angl, end_angl); 

To Draw Rectangle 

ctx.rect(x1,y1,width,height);

  

IMPORTANT

to make drawing visible on canvas use

  ctx.stroke();

 it is compulsory if you don't use stroke then your drawing will not display on canvas


To download canvas tutorial to draw circle click below link

Click here to download

HTML5 Canvas, HTML5 Canvas Tutorial, HTML5 Canvas Tutorial step by step, canvas basic , canvas example to draw circle, canvas example to draw line, canvas example to draw rectangle,fill canvas example

Popular Posts

Follow by Email