Basic Shapes in Canvas

Canvas drawing in HTML allows you to create various basic shapes, including rectangles, circles, lines, and more, providing a foundation for building complex graphics and visualizations. Here's how to draw basic shapes on the canvas:

1. Drawing Rectangles

To draw a rectangle on the canvas, use the fillRect() or strokeRect() method:

// Fill a rectangle
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 50);

// Stroke a rectangle
ctx.strokeStyle = 'red';
ctx.strokeRect(200, 50, 80, 120);

The fillRect() method fills the specified rectangle with the current fill color, while strokeRect() draws the outline of the rectangle with the current stroke color.

2. Drawing Circles

To draw a circle on the canvas, use the arc() method:

ctx.beginPath();
ctx.arc(150, 150, 50, 0, Math.PI * 2); // x, y, radius, startAngle, endAngle
ctx.fillStyle = 'green';
ctx.fill();
ctx.closePath();

The arc() method creates a circular arc, starting at the specified point and ending at the specified angle. Use fill() to fill the circle with the current fill color.

3. Drawing Lines

To draw a line on the canvas, use the moveTo() and lineTo() methods:

ctx.beginPath();
ctx.moveTo(250, 250); // Move to starting point
ctx.lineTo(350, 250); // Draw a line to the ending point
ctx.strokeStyle = 'orange';
ctx.stroke();
ctx.closePath();

The moveTo() method sets the starting point of the line, while lineTo() draws a line to the specified point. Use stroke() to stroke the line with the current stroke color.

4. Drawing Paths

Paths allow you to draw complex shapes composed of multiple straight lines or curves. Use the moveTo(), lineTo(), arc(), and other path methods to define the shape, then stroke or fill the path using stroke() or fill():

ctx.beginPath();
ctx.moveTo(100, 300);
ctx.lineTo(200, 350);
ctx.lineTo(150, 400);
ctx.closePath();
ctx.fillStyle = 'yellow';
ctx.fill();

This code draws a triangular path and fills it with yellow color.

5. Exploring More Shapes

Canvas drawing offers many more shapes and possibilities, including polygons, curves, arcs, and bezier curves. Explore the canvas API documentation and experiment with different methods to create a variety of shapes and graphics.

Example:

Here's a simple example demonstrating how to draw basic shapes on the canvas:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Basic Shapes Example</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400" style="border:1px solid black"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        
        // Draw a rectangle
        ctx.fillStyle = 'blue';
        ctx.fillRect(50, 50, 100, 50);
        
        // Draw a circle
        ctx.beginPath();
        ctx.arc(300, 100, 50, 0, Math.PI * 2);
        ctx.fillStyle = 'green';
        ctx.fill();
        ctx.closePath();
        
        // Draw a line
        ctx.beginPath();
        ctx.moveTo(150, 200);
        ctx.lineTo(250, 200);
        ctx.strokeStyle = 'orange';
        ctx.stroke();
        ctx.closePath();
        
        // Draw a path
        ctx.beginPath();
        ctx.moveTo(100, 300);
        ctx.lineTo(200, 350);
        ctx.lineTo(150, 400);
        ctx.closePath();
        ctx.fillStyle = 'yellow';
        ctx.fill();
    </script>
</body>
</html>

Conclusion

Understanding how to draw basic shapes on the canvas is essential for creating custom graphics and visualizations in web development. By mastering the canvas API methods for drawing rectangles, circles, lines, and paths, you can unleash your creativity and build interactive and engaging web applications.

Archive