Canvas Basics: HTML5

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

< !DOCTYPE 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

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

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.