HTML 5 Tutorial Chapter 5 Canvas Canvas The

Canvas • The <canvas> tag is used to display graphics. • The Canvas is

Basic Syntax • Basic Syntax to create canvas : <canvas id="my_canvas" width="800" height="600"> </canvas>

Basic Syntax • Example : <html> <head> <title>Canvas Demo</title> </head> <body> <canvas id="my_canvas" width="800"

Using Java. Script • The canvas element has no drawing abilities of its own.

Using Java. Script continued… • Then, create a context object : var cxt=c. get.

Understanding Coordinates • The fill. Rect method above had the parameters (0, 0, 150,

Attribute • The HTML 5. 0 supports the following attributes : Attribute Value Description

Reference 1. Hickson, I. (Eds. ). (2011). HTML Living Standar. Retrieved from http: //www.

Slides: 9

Download presentation

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. • The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.

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 Java. Script methods on its context. . <script type="text/javascript"> var c=document. get. Element. By. Id("my_canvas"); var context=c. get. Context("2 d"); context. fill. Style="#FFAA 00"; context. fill. Rect(0, 0, 120, 80); </script>. . .

Basic Syntax • Example : <html> <head> <title>Canvas Demo</title> </head> <body> <canvas id="my_canvas" width="800" height="600"> </canvas> <script type="text/javascript"> var c=document. get. Element. By. Id("my_canvas"); var context=c. get. Context("2 d"); context. fill. Style="#FFAA 00"; context. fill. Rect(0, 0, 120, 80); </script> </body> </html>

Using Java. Script • The canvas element has no drawing abilities of its own. All drawing must be done inside a Java. Script : <script type="text/javascript"> var c=document. get. Element. By. Id("my. Canvas"); var cxt=c. get. Context("2 d"); cxt. fill. Style="#FF 0000"; cxt. fill. Rect(0, 0, 150, 75); </script> • Java. Script uses the id to find the canvas element : var c=document. get. Element. By. Id("my. Canvas");

Using Java. Script continued… • Then, create a context object : var cxt=c. get. Context("2 d"); • The get. Context("2 d") object is a built-in HTML 5 object, with many methods to draw paths, boxes, circles, characters, images and more. • The next two lines draws a red rectangle: cxt. fill. Style="#FF 0000"; cxt. fill. Rect(0, 0, 150, 75); • The fill. Style method makes it red, and the fill. Rect method specifies the shape, position, and size.

Understanding Coordinates • The fill. Rect method above had the parameters (0, 0, 150, 75). • This means: Draw a 150 x 75 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.

Attribute • The HTML 5. 0 supports the following attributes : Attribute Value Description height pixels Sets the height of the canvas width pixels Sets the width of the canvas

Reference 1. Hickson, I. (Eds. ). (2011). HTML Living Standar. Retrieved from http: //www. whatwg. org/specs/webapps/current-work/multipage/ 2. World Wide Web Consortium. (n. d. ). HTML 5 Tutorial. Retrieved from http: //www. w 3 schools. com/html 5/default. asp