What is the HTML5 canvas

HTML5 canvas tutorial

The canvas element - the element for our play area

The playing area is built with the HTML element canvas. Canvas does not come from “can something” but from the English “canvas”. So we have a drawing area (our game board) that needs a height and a width as an indication.

What can canvas do?

On the canvas can:

  • Lines are drawn
  • Rectangle drawing functions
  • Circular arcs
  • Bezier curves
  • Color gradients
  • Images - graphics (PNG, GIF, JPG)
  • transparency
  • text

Integrate canvas in HTML

First we pack a canvas element into a standard HTML framework and give it a unique name in addition to a width and height:

Now complete with HTML5 framework:

Which browsers (from which version) support Canvas

And last but not least, backward compatibility. Canvas was originally developed by Apple as part of WebKit and then incorporated into HTML5. We can use Canvas from version 9 of Internet Explorer without any problems. Firefox from version 3.6, Safari from 3.2, Chrome from version 14 and the Android browser from version 2.2. So an element that is very well supported.

Size canvas

And now the size and a border so that we can see our canvas element. This should be given with our HTML command. If the size is defined via CSS (which seems more logical at first), there can be unattractive effects and size problems with different browsers.

We could also enter percentages for the width and height, but to make it easier to understand, we will first work with absolute values ​​- i.e. for our example with a width of 600 pixels and a height of 300 pixels.