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
Main Features of HTML5 Canvas
Canvas is fully interactive with response to user’s actions created by keyboard, mouse or touch event.
Canvas support for all levels of animation. You can create graphics on canvas and then put life in these graphics by animating these graphics.
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.
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.
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.
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.
Canvas has put a big dent on use of flash for use advertising, such as banner and ads.
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’