Styling and Coloring Shapes in Canvas

Canvas drawing in HTML provides various methods for styling and coloring shapes to create visually appealing graphics and visualizations. Here's how to style and color shapes in the canvas:

1. Setting Fill and Stroke Styles

Before drawing shapes, you can set the fill and stroke styles using the fillStyle and strokeStyle properties:

// Set fill style
ctx.fillStyle = 'blue';

// Set stroke style
ctx.strokeStyle = 'red';

This sets the fill color to blue and the stroke color to red.

2. Filling Shapes with Color

To fill shapes with color, use the fill() method after defining the shape:

// Draw a rectangle
ctx.fillRect(50, 50, 100, 100); // x, y, width, height

// Draw a circle
ctx.beginPath();
ctx.arc(200, 100, 50, 0, Math.PI * 2);
ctx.fill(); // Fill the circle

This fills the rectangle and circle with the specified fill color.

3. Stroking Shapes with Color

To stroke shapes with color, use the stroke() method after defining the shape:

// Draw a rectangle
ctx.strokeRect(50, 200, 100, 100); // x, y, width, height

// Draw a circle
ctx.beginPath();
ctx.arc(200, 250, 50, 0, Math.PI * 2);
ctx.stroke(); // Stroke the circle

This strokes the outline of the rectangle and circle with the specified stroke color.

4. Applying Gradients and Patterns

In addition to solid colors, you can apply gradients and patterns to shapes using the createLinearGradient(), createRadialGradient(), and createPattern() methods:

// Create a linear gradient
var gradient = ctx.createLinearGradient(50, 300, 150, 400);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(50, 300, 100, 100); // Fill a rectangle with gradient

// Create a radial gradient
var gradient = ctx.createRadialGradient(250, 350, 0, 250, 350, 50);
gradient.addColorStop(0, 'green');
gradient.addColorStop(1, 'yellow');
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(250, 350, 50, 0, Math.PI * 2);
ctx.fill(); // Fill a circle with gradient

This applies linear and radial gradients to shapes, creating colorful and dynamic visual effects.

Example:

Here's a simple example demonstrating how to style and color shapes in 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 Styling 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');
        
        // Set fill style
        ctx.fillStyle = 'blue';
        
        // Fill a rectangle
        ctx.fillRect(50, 50, 100, 100);
        
        // Set stroke style
        ctx.strokeStyle = 'red';
        
        // Stroke a rectangle
        ctx.strokeRect(200, 50, 100, 100);
        
        // Create a linear gradient
        var gradient = ctx.createLinearGradient(50, 200, 150, 300);
        gradient.addColorStop(0, 'orange');
        gradient.addColorStop(1, 'purple');
        
        // Fill a rectangle with gradient
        ctx.fillStyle = gradient;
        ctx.fillRect(50, 200, 100, 100);
        
        // Create a radial gradient
        var gradient = ctx.createRadialGradient(250, 250, 0, 250, 250, 50);
        gradient.addColorStop(0, 'green');
        gradient.addColorStop(1, 'yellow');
        
        // Fill a circle with gradient
        ctx.fillStyle = gradient;
        ctx.beginPath();
        ctx.arc(250, 250, 50, 0, Math.PI * 2);
        ctx.fill();
    </script>
</body>
</html>

Conclusion

Styling and coloring shapes in the canvas allows you to create visually engaging graphics and visualizations in web development. By setting fill and stroke styles, applying gradients and patterns, you can add depth and richness to your canvas-based applications, enhancing the user experience.

Archive