HTML Draw on the Canvas
Draw on the Canvas With JavaScript
The drawing on the canvas is done with JavaScript.
The canvas is initially blank. To display something, a script is needed to access the rendering context and draw on it.
The following example draws a red rectangle on the canvas, from position (0,0) with a width of 150 and a height of 75:
Example
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
black;">
</canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 150, 75);
</script>
Try it Yourself »
Step 1: Find the Canvas Element
First of all, you must find the <canvas> element.
You access a <canvas> element with the HTML
DOM method getElementById():
const canvas = document.getElementById("myCanvas");
Step 2: Create a Drawing Object
Secondly, you need a drawing object for the canvas.
The getContext() method returns an object
with tools (properties and methods) for drawing:
const ctx = canvas.getContext("2d");
Step 3: Draw on the Canvas
Finally, you can draw on the canvas.
Set the fill-color to red with the fillStyle
property:
ctx.fillStyle = "red";
The fillStyle property can be a color, a gradient, or a pattern. The default
fillStyle is black.
The fillRect(x, y, width, height) method draws
the rectangle, filled with the fill style color, on the canvas:
ctx.fillRect(0, 0, 150, 75);
