Drawing Rectangles:
Rectangles are one of the basic shapes you can draw on a Canvas. You can draw filled rectangles or outline rectangles.
Example - Drawing a Filled Rectangle:
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Drawing a filled rectangle
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 75); // x, y, width, height
</script>
In this example:
- We obtain the Canvas context (ctx) in JavaScript.
- Set the fill color (fillStyle) to blue.
- Use the fillRect method to draw a filled rectangle at coordinates (50, 50) with a width of 100 and height of 75.
Example - Drawing an Outlined Rectangle:
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Drawing an outlined rectangle
ctx.strokeStyle = 'red'; // Set outline color
ctx.strokeRect(50, 50, 100, 75); // x, y, width, height
</script>
Here, we use strokeStyle to set the outline color and strokeRect to draw an outlined rectangle.
Drawing Circles:
Circles are drawn using the arc method, which creates an arc or a portion of a circle.
Example - Drawing a Circle:
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.beginPath();
ctx.arc(200, 100, 50, 0, Math.PI * 2); // x, y, radius, startAngle, endAngle
ctx.fill();
</script>
Here, arc(200, 100, 50, 0, Math.PI * 2) creates a circle centered at (200, 100) with a radius of 50. The start angle is 0 radians, and the end angle (Math.PI * 2) completes the circle.
Drawing Lines:
Lines are drawn using the moveTo and lineTo methods.
Example - Drawing a Line:
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'purple';
ctx.beginPath();
ctx.moveTo(50, 50); // Start point
ctx.lineTo(200, 100); // End point
ctx.stroke();
</script>
This code draws a line from (50, 50) to (200, 100) with a purple color stroke.
Drawing Arcs:
Arcs are used to draw curved lines or portions of circles.
Example - Drawing an Arc:
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'orange';
ctx.beginPath();
ctx.arc(200, 100, 50, 0, Math.PI / 2); // x, y, radius, startAngle, endAngle
ctx.stroke();
</script>
Here, arc(200, 100, 50, 0, Math.PI / 2) draws a quarter of a circle with a radius of 50 at (200, 100) starting from 0 radians to π/2 radians.
Practice Excercise Practice now