We shall start exploring more about Canvas element of HTML5.
It’s designed to draw graphics on the fly, using Javascript.
Canvas is like a placeholder for graphics. We place a context upon canvas, upon which we draw our graphics – lines, circles, triangle, pictures etc.
HTML file
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | < !DOCTYPE HTML>
<html>
<head>
<title>Canvas: HTML5</title>
<meta charset="utf-8"/>
<link href="myStyle.css" rel="stylesheet"/>
</head>
<body>
<canvas id="holder" width="300" height="200">
Please upgrade your browser!
</canvas>
</body>
</html> |
Here we have attached a style sheet to index.html
and we have the canvas element with an id, width and a height property applied to it.
We can specify some text in-between the opening and closing canvas tag, which shows up in the browser which doesn’t support HTML5’s canvas element.
CSS file
myStyle.css
1 2 3 | canvas {
border: 3px groove black;
} |
Here we’re applying some basic style to our canvas.
Since canvas is transparent by nature, we can’t see it unless we give it a border or fill some color into it. So, using CSS we apply 3px wide black border, for the purpose of illustration.
Canvas Basics: HTML5
[youtube https://www.youtube.com/watch?v=2lJqB9RikYo]
CSS width and height
We could even assign width and height property of canvas element via CSS, but it is not the proper way to do it.
We must give width and height property inside HTML document itself – as canvas property.
If you assign width and height via CSS, it’ll either stretch or shrink depending on the actual canvas width and height: which looks weird.
