Html5 Canvas

Hi in this tutorial we will learn about Html5 Canvas, the canvas is a html5 new feature use to draw Graphics on webpages using JavaScript, you can start drawing using <canvas> element but you must know about JavaScript The Canvas html element have only two attributes width and height


and we can style the canvas element using CSS Style Sheets. The canvas feature supports all major browsers, using canvas feature we can draw 2d graphics like shapes, lines, text, image compositions and simple animations, gradients, The Html Canvas is a two dimensional grid X and Y

What is Best in HTML5 Canvas

The Canvas element is fully user friendly like other html elements and it is interact with all events like Mouse and Keyboard

We can easily manage the Canvas element with JavaScript code and it is very flexible to create anything using Canvas like graphics shapes and gradients

Once you built any Canvas application you can reuse in other applications like Flash

We can built 2d and 3d Games

Web based Animated banner ads without using any Flash Content

Rendering Contexts, every HTML5 Canvas element have contexts and contexts tell what Html5 Canvas API you using

Creating Canvas Element

<canvas id="myCanvas" width="600" height="300">

    <p>Your browser doesn’t support HTML5 Canvas. 
    Please check canvas for information on 
    browser support for canvas.</p>


</canvas>

Find the Canvas Using JavaScript

You can Access the Html elements using JavaScript

<script>

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

</script>

Creating a Drawing Object

for creating drawing object 2d or 3d use getContext() object this object have methods and properties

<script>

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

var draw = myCanvas.getContext("2d");

</script>

Drawing Simple Rectangle 

the bellow code draw a Rectangle the fillStyle() property used to fill the color and fillRect() property used to draw a shape with given values this method have four properties X position Y position Width and Height

<script>

var canvas = document.getElementById("myCanvas");

var draw = canvas.getContext("2d");

draw.fillStyle = "#F60";

draw.fillRect(0,0,180,75);

</script>