Canvas is the same HTML tag as the others. However, to work with all the possibilities of canvas, we need to use JavaScript. We need to place the <canvas>
tag on the page in the body section. We then need to access its context with JavaScript and do some drawings on it, almost like painting a real picture.
There is a difference between the canvas element and the canvas context. Context is an object that provides methods to draw on the canvas. Canvas can have two types of context: 2D or WebGL (3D).
Let's look onto one example of the HTML5 Canvas usage:
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="gameCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('gameCanvas'); var context = canvas.getContext('2d'); context.font = '30pt Calibri'; ...