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 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 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 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.
Introduction to canvas tag
//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 canvasvar 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
JSvar 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
JSvar 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.