The <canvas> element allows for dynamic, scriptable rendering of 2D shapes and bitmap images in HTML. It is supported in all major browsers. JavaScript can be used to draw rectangles, change colors, and animate drawings on the <canvas> element. The document provides code samples and resources for learning how to use the <canvas> element to dynamically draw graphics in the browser.
5. The <canvas> Element
<!doctype html>
<html>
<head>
<title>Canvas is awesome!</title>
</head>
<body>
<canvas width="500" height="500">
Sorry, your browser does not support canvas :(
</canvas>
</body>
</html>
6. <!doctype html>
<html>
<head>
<title>Canvas is awesome!</title>
</head>
<body>
<canvas width="500" height="500">
Sorry, your browser does not support canvas :(
</canvas>
</body>
</html>
The <canvas> Element
8. JavaScript to the rescue!
<!doctype html>
<html>
<head>
<title>Canvas is awesome!</title>
</head>
<body>
<canvas width="500" height="500">
Sorry, your browser does not support canvas :(
</canvas>
<script src="script.js"></script>
</body>
</html>
9. JavaScript to the rescue!
// script.js
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(0, 0, 100, 100);
Learn more: https://developer.mozilla.org/en-US/docs/Web/HTML/Canvas