html5 canvas tutorial: introduction
<canvas>Canvas is a new tag of html introduced in HTML5.As you know all html tags are container , canvas is container for HTML graphics. We can draw graphics such as line,boxes,circle and other shapes on HTML page in
canvasCanvas element has start and close tag .We write
canvas element as
<canvas>
</canvas>
height and
length.These attribute set the size of canvas on HTML page. Actually we use JavaScript
methods (API) to draw graphics. Simplest page with canvas element will be.how to embed html5 canvas tag in html5 document
<!DOCTYPE html>
<html>
<head>
<title>
HTML Canvas example
</title>
</head>
<body>
<canvas id ="myCanvas" width ="200" height ="200">
</canvas >
</body>
</html>
mycanvas.htmlwhen we see this document in browser .we will see a blank page. Dont worry our canvas is present but hidden. To see canvas we will add style to our canvas. We will modify our Canvas tag as
<canvas width ="200" height ="200" style="border: 1px solid #0000ff;">
</canvas>
Modified HTML Document
<!DOCTYPE html>
<html>
<head>
<title >
HTML canvas example
</title>
</head>
<body>
<canvas height="200" width="200" style="border:1px solid #0000ff;>
</canvas>
</body >
</html>
Congratulation !
Our canvas in blue color rectangle is present in our web page. We have now canvas and we can draw
No comments:
Post a Comment