HTML5 Canvas Introduction

This introduction will tell you about What is HTML5 Canvas and its brief Introduction of html5 canvas. First, we introduce you to html5 canvas in this tutorial. Let us first describe what is canvas. If you are painter and you want to draw something very cool and engaging. What you need first thing, simply your answer would be canvas. Now the situation is that you are html5 web developer and you want to add some graphics on your web page. You need html5 canvas.

HTML5 Canvas : An Introduction

HTML5 canvas is a HTML5 element, which is used to draw graphics on web page. With the help of canvas, you can draw graphics and can animate graphics directly in the browser. The other two things to draw graphics are flash and Silverlight. But canvas is free and open source in comparison with other tools. You can harness the real power of canvas by taking advantage of HTML5 Canvas API. These API are used by writing JavaScript.

Main Features of HTML5 Canvas

Interactivity:

Canvas is fully interactive with response to user’s actions created by keyboard, mouse or touch event.

Animation:

Canvas support for all levels of animation. You can create graphics on canvas and then put life in these graphics by animating these graphics.

Flexibility:

Canvas is very flexible, you can draw lines, shapes, text static or animated by your own choice. You can display other images on html5 canvas. You can add audio and video on html5 canvas arena.

Platform Independence:

Html5 Canvas is independent of platform. You can use html5 canvas on different operating systems and on different types of devices such as desktops, tablets, laptops and smart phones.

All major browsers Support

Canvas has all major browsers such as chrome, Firefox, Opera, Safari and Internet Explorer.

Popularity

HTML5 Canvas is getting popularity day by day. There are no shortages of resources. Some sites who have Tutorials only on canvas getting traffic more than 50000 pages view daily.

Web Standard and future of web

HTML5 Canvas is a part of HTML5. HTML5 is the reigning standard of web and future of web.

Develop once, run everywhere

Java famous slogan is true about Canvas.

Free and Easy accessibility

HTML5 Canvas is free and as it is part of html5 and other technology java script is also free. You do not need to download and install extra software for canvas development.

Major fields of application of Canvas.

Gaming.

HTML5 Canvas has set stage for html5 game development. Now the smart phones and other platform are highways for web games with help of canvas you can create 2d and 3d games.

Advertisingh5

Canvas has put a big dent on use of flash for use advertising, such as banner and ads.

Data Representation

With the help of HTML5 canvas you can generate visually appealing and interactive graphs and charts.

Education and Training

HTML5 Canvas has great potential in field of education and training. By combining text, images videos and audio and interactivity and animation, HTM5 canvas can be very beneficial.

Art and Decoration

Canvas support wide variety of gradients, pattern, transparency, shadows and clipping features. You can create fascinating model of art and decoration with the help of canvas.

HTML5 Canvas Structure.

HTML5 Canvas can be added in any html5 document with writing just canvas tag. Canvas tag has two attribute width and length. These width and length create a rectangle on webpage where you can draw graphics.

Canvas tag has following basic structure.
——————————–

<canvas id="idName" width ="value in pixels" height ="value in pixel">

</canvas>

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


</canvas>

By default browser creates canvas of width 300 pixels and height 150 pixels. Canvas has no border and background by default. You can set it by CSS. If you do not set the border canvas will not be visible in web browser.

Canvas Rendering Contexts

One important point every HTML5 canvas element must have a context to draw graphics. This context define the mode of drawing and HTML5 Canvas API.The 2d context is used to draw 2D graphics and manipulating bitmap images. The 3D context is used for creation and manipulation of 3D graphics. The 3D is actually called WebGL and is based on OpenGL ES.
After this html5 canvas introduction ,now it is time to get html5 canvas introduction with code.

Canvas Rendering Contexts

One important point every HTML5 canvas element must have a context to draw graphics. This context define the mode of drawing and HTML5 Canvas API.The 2d context is used to draw 2D graphics and manipulating bitmap images. The 3D context is used for creation and manipulation of 3D graphics. The 3D is actually called WebGL and is based on OpenGL ES. After this html5 canvas introduction ,now it is time to get html5 canvas introduction with code.

HTML5 Canvas – An Example Code

<!DOCTYPT html>

<html>
    <head>
    </head>
    <body>
        <canvas  id="myCanvas" width="600" height="200">
        </canvas>

        <script>
            var canvas = document.getElementById("myCanvas");
            var context = myCanvas.getContext("2d");
        </script>

    </body>
</html>

Save this html document as html5canvas.html and see in a web browser, you will see a rectangle of blue color.

[codepen_embed height=500 theme_id=1 slug_hash=’xbrOZN’ 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 *