HTML 5 Tutorial Chapter 5 Canvas. Canvas The tag is used to display graphics. The Canvas is a...
9
HTML 5 Tutorial HTML 5 Tutorial Chapter 5 Chapter 5 Canvas Canvas
-
Upload
jasper-quinn -
Category
Documents
-
view
213 -
download
0
Transcript of HTML 5 Tutorial Chapter 5 Canvas. Canvas The tag is used to display graphics. The Canvas is a...
HTML 5 TutorialHTML 5 Tutorial
Chapter 5Chapter 5CanvasCanvas
CanvasCanvas• 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 SyntaxBasic 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">
var c=document.getElementById("my_canvas");
var context=c.getContext("2d");
context.fillStyle="#FFAA00";
context.fillRect(0,0,120,80);
</script>
...
Basic SyntaxBasic 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.getElementById("my_canvas");
var context=c.getContext("2d");
context.fillStyle="#FFAA00";
context.fillRect(0,0,120,80);
</script>
</body>
</html>
Using JavaScriptUsing 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");
var cxt=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");
Using JavaScript Using JavaScript continued…continued…
• Then, create a context object :var cxt=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.
Understanding CoordinatesUnderstanding 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.
AttributeAttribute• 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
ReferenceReference
1. Hickson, I. (Eds.). (2011). HTML Living Standar. Retrieved from http://www.whatwg.org/specs/web-apps/current-work/multipage/
2. World Wide Web Consortium. (n.d.). HTML 5 Tutorial. Retrieved from http://www.w3schools.com/html5/default.asp
