1 / 9

HTML 5 Tutorial

HTML 5 Tutorial. Chapter 5 Canvas. Canvas. The <canvas> tag is used to display graphics. The Canvas is a rectangular area we control each and every pixel of it. The <canvas> tag is only a container for graphics, you must use a script to actually paint graphics.

chelsi
Download Presentation

HTML 5 Tutorial

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML 5 Tutorial Chapter 5 Canvas

  2. Canvas The <canvas> tag is used to display graphics. The Canvas is a rectangular area we control each and every pixel of it. The <canvas> tag is only a container for graphics, you must use a script to actually paint graphics. The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.

  3. Basic Syntax Basic Syntax to create canvas : <canvas id="my_canvas" width="800" height="600"> </canvas> Once the Canvas was created we can draw various graphics by calling various JavaScript methods on its context. ... <script type="text/javascript"> varc=document.getElementById("my_canvas"); varcontext=c.getContext("2d"); context.fillStyle="#FFAA00"; context.fillRect(0,0,120,80); </script> ...

  4. Basic Syntax Example : <html> <head> <title>Canvas Demo</title> </head> <body> <canvas id="my_canvas" width="800" height="600"> </canvas> <script type="text/javascript"> varc=document.getElementById("my_canvas"); varcontext=c.getContext("2d"); context.fillStyle="#FFAA00"; context.fillRect(0,0,120,80); </script> </body> </html>

  5. Using JavaScript The canvas element has no drawing abilities of its own. All drawing must be done inside a JavaScript : <script type="text/javascript"> var c=document.getElementById("myCanvas"); varcxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script> JavaScript uses the id to find the canvas element : var c=document.getElementById("myCanvas");

  6. Using JavaScript continued… Then, create a context object : varcxt=c.getContext("2d"); The getContext("2d") object is a built-in HTML5 object, with many methods to draw paths, boxes, circles, characters, images and more. The next two lines draws a red rectangle: cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); The fillStyle method makes it red, and the fillRect method specifies the shape, position, and size.

  7. Understanding Coordinates The fillRect method above had the parameters (0,0,150,75). This means: Draw a 150x75 rectangle on the canvas, starting at the top left corner (0,0). The canvas X and Y coordinates are used to position drawings on the canvas.

  8. Attribute The HTML 5.0 supports the following attributes :

  9. Reference Hickson, I. (Eds.). (2011). HTML Living Standar. Retrieved from http://www.whatwg.org/specs/web-apps/current-work/multipage/ World Wide Web Consortium. (n.d.). HTML 5 Tutorial. Retrieved from http://www.w3schools.com/html5/default.asp

More Related