HTML Canvas Adding Styles Tutorial

The HTML5 <canvas> element allows you to add styles to shapes and paths using colors, gradients, patterns, and line properties.

Styling enhances the visual appeal of your canvas drawings, making them more dynamic and engaging.

In this tutorial, you’ll learn:

1. How to set colors and transparency.
2. Applying gradients for dynamic coloring.
3. Using patterns to fill shapes.
4. Customizing line styles.
5. Practical examples of styled canvas drawings.

1. Setting Colors

The Canvas API uses two key properties for styling:

• fillStyle: Sets the fill color for shapes.
• strokeStyle: Sets the outline color for shapes.

Example 1: Applying Solid Colors

<canvas id="myCanvas" width="400" height="200" style="border: 1px solid black;"></canvas>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // Filled rectangle
    ctx.fillStyle = "blue";
    ctx.fillRect(50, 50, 100, 50);

    // Outlined rectangle
    ctx.strokeStyle = "red";
    ctx.lineWidth = 5;
    ctx.strokeRect(200, 50, 100, 50);
</script>

2. Transparency with RGBA

RGBA colors allow you to add transparency to your fills and strokes.

Example 2: Transparent Shapes

// Semi-transparent fill
ctx.fillStyle = "rgba(0, 255, 0, 0.5)"; // Green with 50% transparency
ctx.fillRect(50, 120, 100, 50);

// Semi-transparent outline
ctx.strokeStyle = "rgba(255, 0, 0, 0.8)"; // Red with 80% transparency
ctx.lineWidth = 3;
ctx.strokeRect(200, 120, 100, 50);

3. Adding Gradients

3.1 Linear Gradients

Linear gradients create a smooth color transition between two or more colors.

Syntax:

const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
gradient.addColorStop(position, color);

Example 3: Linear Gradient

const gradient = ctx.createLinearGradient(0, 0, 400, 0);
gradient.addColorStop(0, "blue");
gradient.addColorStop(0.5, "green");
gradient.addColorStop(1, "yellow");

ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 400, 100);

3.2 Radial Gradients

Radial gradients radiate colors from a central point.

Syntax:

const gradient = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
gradient.addColorStop(position, color);

Example 4: Radial Gradient

const gradient = ctx.createRadialGradient(200, 100, 20, 200, 100, 100);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "white");

ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 400, 200);

4. Using Patterns

You can create patterns using images or existing canvas content.

Syntax:

const pattern = ctx.createPattern(image, repetition);

Example 5: Filling with an Image Pattern

const image = new Image();
image.src = "https://via.placeholder.com/50"; // Example image URL
image.onload = () => {
    const pattern = ctx.createPattern(image, "repeat"); // Options: repeat, repeat-x, repeat-y, no-repeat
    ctx.fillStyle = pattern;
    ctx.fillRect(50, 50, 300, 150);
};

5. Customizing Line Styles

5.1 Line Width and Cap Styles

• lineWidth: Sets the thickness of lines.
• lineCap: Determines the style of the line endpoints (butt, round, or square).

Example 6: Line Width and Caps

ctx.lineWidth = 10;

// Butt cap
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineCap = "butt";
ctx.strokeStyle = "red";
ctx.stroke();

// Round cap
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(150, 100);
ctx.lineCap = "round";
ctx.strokeStyle = "green";
ctx.stroke();

// Square cap
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(150, 150);
ctx.lineCap = "square";
ctx.strokeStyle = "blue";
ctx.stroke();

5.2 Line Joins

• lineJoin: Sets how lines connect at their corners (bevel, round, or miter).

Example 7: Line Joins

ctx.lineWidth = 10;

// Bevel join
ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(250, 100);
ctx.lineTo(200, 150);
ctx.lineJoin = "bevel";
ctx.strokeStyle = "purple";
ctx.stroke();

// Round join
ctx.beginPath();
ctx.moveTo(300, 50);
ctx.lineTo(350, 100);
ctx.lineTo(300, 150);
ctx.lineJoin = "round";
ctx.strokeStyle = "orange";
ctx.stroke();

// Miter join
ctx.beginPath();
ctx.moveTo(400, 50);
ctx.lineTo(450, 100);
ctx.lineTo(400, 150);
ctx.lineJoin = "miter";
ctx.strokeStyle = "brown";
ctx.stroke();

5.3 Dotted and Dashed Lines

Use the setLineDash method to create dashed or dotted lines.

Example 8: Dashed and Dotted Lines

// Dashed line
ctx.setLineDash([10, 5]); // Dash and gap lengths
ctx.beginPath();
ctx.moveTo(50, 200);
ctx.lineTo(350, 200);
ctx.strokeStyle = "black";
ctx.stroke();

// Dotted line
ctx.setLineDash([2, 2]);
ctx.beginPath();
ctx.moveTo(50, 250);
ctx.lineTo(350, 250);
ctx.strokeStyle = "gray";
ctx.stroke();

6. Practical Example: Styled Scene

Example 9: Creating a Landscape

// Sky (Gradient)
const skyGradient = ctx.createLinearGradient(0, 0, 0, 300);
skyGradient.addColorStop(0, "skyblue");
skyGradient.addColorStop(1, "white");
ctx.fillStyle = skyGradient;
ctx.fillRect(0, 0, 400, 300);

// Sun (Radial Gradient)
const sunGradient = ctx.createRadialGradient(350, 50, 10, 350, 50, 50);
sunGradient.addColorStop(0, "yellow");
sunGradient.addColorStop(1, "transparent");
ctx.fillStyle = sunGradient;
ctx.beginPath();
ctx.arc(350, 50, 50, 0, Math.PI * 2);
ctx.fill();

// Grass
ctx.fillStyle = "green";
ctx.fillRect(0, 300, 400, 100);

// Path (Dashed Line)
ctx.setLineDash([15, 5]);
ctx.lineWidth = 5;
ctx.strokeStyle = "brown";
ctx.beginPath();
ctx.moveTo(200, 300);
ctx.lineTo(200, 400);
ctx.stroke();

7. Best Practices for Canvas Styles

1. Layer Colors Thoughtfully:
   • Draw background elements first to prevent overwriting details.
2. Reuse Gradients and Patterns:
   • Store gradients and patterns in variables for efficient reuse.
3. Adjust Line Styles:
   • Use line caps, joins, and dashes for better visual appeal.

8. Browser Support

9. Conclusion

In this tutorial, you learned:

1. How to set solid colors and transparency.
2. How to create and apply gradients and patterns.
3. How to customize lines with caps, joins, and dashes.
4. How to combine these styles into practical examples.