What is HTML5 Canvas?
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...
