HTML Canvas Graphics
The HTML <canvas> element is used to draw graphics on a web page via JavaScript.
What is HTML Canvas?
The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
Example: Drawing a Red Rectangle
html
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>Test Yourself with an Exercise
What language is used to draw graphics on an HTML canvas?