HTML Canvas Shapes
Canvas Shapes
To draw different shapes that consist of straight lines in canvas, we use the following methods:
| Method | Description | Draws |
|---|---|---|
beginPath() |
Declares that we are about to draw a new path (without drawing) | No |
moveTo(x,y) |
Sets the start-point of the shape in the canvas (without drawing) | No |
lineTo(x,y) |
Sets the sub-point or the end-point of the shape in the canvas (without drawing) | No |
stroke() |
Draws the line (from the start point, through the sub-points and to the end-point). The default stroke color is black | Yes |
Example
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
// Set start-point
ctx.moveTo(20,20);
// Set sub-points
ctx.lineTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
// Set end-point
ctx.lineTo(20,20);
// Stroke it (do the drawing)
ctx.stroke();
</script>
Try it Yourself »
More Examples
Example
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(180,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();
</script>
Try it Yourself »
The strokeStyle Property
The strokeStyle property defines the color
of the stroke.
It must be set before calling the stroke() method.
Example
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
// Define a rectangle
ctx.moveTo(20,20);
ctx.lineTo(180,20);
ctx.lineTo(180,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// Define a triangle
ctx.moveTo(100,20);
ctx.lineTo(180,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "red";
ctx.stroke();
</script>
Try it Yourself »
