Drawing on the HTML canvas is to be done with JavaScript. Use the HTML DOM Method getElementById() and getContext() before drawing on the canvas.
For that, follow some steps −
- You need to use the getElementById() method to find the canvas element.
- Use the getContext(), which is drawing object for the canvas. It provides the methods and properties for drawing.
- After that draw on the canvas.
Example
You can try to run the following code to draw canvas on JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>HTML Canvas</title>
</head>
<body>
<canvas id="newCanvas" width="400" height="250" style="border:2px solid #000000;"></canvas>
<script>
var canvas = document.getElementById("newCanvas");
var ctxt = canvas.getContext("2d");
ctxt.fillStyle = "#56A7E2";
ctxt.fillRect(0,0,250,120);
</script>
</body>
</html>