Html5 Canvas

HTML5 :-
college paper help
Before few years ago html was limited to only till creation of web page, but since html5 i.e. standard version of html was introduce in 1999 now a days we can do many things apart from just creating static web pages.

HTML5 has come up with new really new interesting features which is equivalent to flash player. With HTML5 now we can develop each and every thing that could be possible with flash player.

Canvas is one of the features which is added with other features like video, audio in HTML5, which included to HTML5 in 2011 and still it is under development.

Canvas:-

• Canvas was originally developed by Apple for their internal Mac OS X WebKit in 2004.
• Later standardized by Web Hypertext Application Technology Working Group (WHATWG).

Why Canvas ?

The basic question would be why to choose to canvas….

• We can develop Fancy user interfaces.
• Flash like Animations can be developed in HTML5 using canvas.
• Drawing applications can be developed by using canvas.
• Charts and graphs can easily be draw by using canvas.
• Simple diagrams can be draw by using canvas.

What is difference between SVG and CANVAS

SVG

• SVG is Shape-based any shape draw with SVG is treated as single element.
• Multiple graphical elements draw which become part of the Document Object Model (DOM)
• SVG size of element is modified through Script and CSS.
• User Interaction is abstracted (rect, path) we have to provide shape and it’s path.
• Performance is better with smaller number of objects and/or larger surface

Canvas

• Canvas element is Pixel-based (dynamic bitmap).
• canvas is considered as Single HTML element.
• canvas element is modified through Script only.
• Model User Interaction is granular (x, y) we can provide shape size in pixel i.e. X-Axis and Y-Axis.
• Performance is better with smaller surface.

Attributes

Introduction to canvas tag
HTML

<canvas></canvas>
//This is the way, how you include canvas to the html.
<canvas height=”258” width=”300”></canvas>
//Height & Width:- Pass the parameter of height and width as per requirement.

Creating object for canvas
var canvas=document.getElementById("....canvas ID....");
var cxt=canvas.getContext("2d");
//method can be used access built-in object.

Object ctx will give us direct access to paint and draw on canvas.
How to draw TEXT in canvas
Example :-

JS
var canvas=document.getElementById("Canvas");
var ctx=canvas .getContext("2d");
ctx.font="20px Georgia";
//Define font size and family
ctx.strokeText("Mobisoft-infotech",10,50);
//Will Draw Mobisoft-infotech TEXT on canvas.

Drawing line on canvas
Examples:-

JS

var canvas=document.getElementById(“canvas”); var ctx=canvas.getContext(“2d”); ctx.moveTo(x,y); //move to line from location x, y. ctx.lineTo(x1,y1);
//draw line from above point to point given here.

contex
765qwerty765