HTML5 Canvas API and 2D Rendering Context

The HTML5 <canvas> element, combined with its 2D rendering context (ctx), is a powerful tool for creating interactive graphics directly in the browser. It provides a way to draw shapes, text, images, and even complex animations on a web page, allowing developers to create everything from simple graphics to intricate games and visualizations.

Setting Up a Canvas Element

A canvas element is defined by the <canvas> HTML tag. You can set its width and height using attributes or CSS. The default size is 300px by 150px, but you’ll typically want to customize it.

<canvas id="myCanvas" width="600" height="400"></canvas>

Next, you need to obtain a rendering context, which is what you'll use to draw on the canvas:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');  // Get the 2D context

Important Notes:

The canvas.width and canvas.height properties control the actual resolution of the drawing surface. Setting them through attributes or JavaScript ensures a higher quality render.

To control the display size (e.g., responsive layout), use CSS with canvas.style.width and canvas.style.height.

Drawing Shapes and Paths

2.1 Rectangles

Canvas provides several built-in methods for drawing rectangles:

• ctx.fillRect(x, y, width, height): Draws a filled rectangle.
• ctx.strokeRect(x, y, width, height): Draws a rectangular outline.
• ctx.clearRect(x, y, width, height): Clears the specified rectangle, making it transparent.

Example:

ctx.fillStyle = 'blue';  // Set the fill color
ctx.fillRect(50, 50, 150, 100);  // Draw a blue rectangle

2.2 Drawing Paths

Paths allow for more complex shapes. To draw custom shapes:

• ctx.beginPath(): Starts a new path.
• ctx.moveTo(x, y): Moves the "pen" to a new position.
• ctx.lineTo(x, y): Draws a line to a new position.
• ctx.closePath(): Closes the path (connects the last point to the first point).

Once the path is defined, you can either fill it or draw its outline:

• ctx.fill(): Fills the path with the current fill color.
• ctx.stroke(): Draws the outline of the path using the current stroke style.

Example:

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 200);
ctx.closePath();
ctx.fill();  // Fill the triangle

2.3 Arcs and Circles

You can draw arcs and circles using the ctx.arc() method:

• ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise): Draws an arc or a circle.

Example:

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

2.4 Curves

Canvas also supports drawing quadratic and Bezier curves:

• ctx.quadraticCurveTo(cp1x, cp1y, x, y): Draws a quadratic curve.
• ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): Draws a cubic Bezier curve.

Styling and Colors

Canvas allows you to set colors, gradients, and patterns for your drawings.

3.1 Fill and Stroke Styles

• ctx.fillStyle = color: Sets the color for shapes that are filled.
• ctx.strokeStyle = color: Sets the color for shapes that are stroked (outlined).

Example:

ctx.fillStyle = 'red';
ctx.strokeStyle = 'black';
ctx.fillRect(20, 20, 100, 50);  // Red rectangle with black border
ctx.strokeRect(20, 20, 100, 50);

3.2 Gradients

There are two types of gradients in canvas:

• ctx.createLinearGradient(x0, y0, x1, y1): Creates a linear gradient.
• ctx.createRadialGradient(x0, y0, r0, x1, y1, r1): Creates a radial gradient.

Example:

const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 200, 100);  // Gradient from red to blue

3.3 Shadows

• ctx.shadowColor: The color of the shadow.
• ctx.shadowBlur: The blur level for the shadow.
• ctx.shadowOffsetX and ctx.shadowOffsetY: Offset distances for the shadow.

Example:

ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.fillRect(100, 100, 150, 100);  // Draws a rectangle with shadow

Text Rendering

Canvas allows you to draw both filled and stroked text. You can set the font, alignment, and baseline:

• ctx.font: Sets the font size and style (e.g., '30px Arial').
• ctx.fillText(text, x, y): Draws filled text.
• ctx.strokeText(text, x, y): Draws an outline of the text.
• ctx.textAlign: Aligns the text ('left', 'right', 'center').
• ctx.textBaseline: Sets the vertical alignment ('top', 'middle', 'alphabetic').

Example:

ctx.font = '48px serif';
ctx.fillText('Hello Canvas', 100, 100);  // Draws text at (100, 100)
ctx.strokeText('Hello Canvas', 100, 150);  // Outlines text at (100, 150)

Images

Canvas can draw images, such as from a <img> element, onto the canvas using the ctx.drawImage() method:

• ctx.drawImage(image, x, y): Draws an image at the specified position.
• ctx.drawImage(image, x, y, width, height): Draws an image scaled to the specified size.

Example:

const img = new Image();
img.src = 'image.jpg';
img.onload = () => {
  ctx.drawImage(img, 0, 0, 200, 100);  // Draws image scaled to 200x100
};

Transformations

Canvas provides methods for translating, rotating, and scaling shapes:

• ctx.translate(x, y): Moves the origin of the canvas to a new location.
• ctx.rotate(angle): Rotates the canvas around the current origin (angle in radians).
• ctx.scale(x, y): Scales the canvas horizontally and vertically.

Example:

ctx.translate(200, 200);  // Move the origin to (200, 200)
ctx.rotate(Math.PI / 4);  // Rotate 45 degrees
ctx.fillRect(-50, -50, 100, 100);  // Draw rotated rectangle

Pixel Manipulation

Canvas allows you to access and manipulate individual pixels with ImageData:

• ctx.getImageData(x, y, width, height): Retrieves pixel data from a region.
• ctx.putImageData(imageData, x, y): Puts the pixel data onto the canvas.
• ctx.createImageData(width, height): Creates a new ImageData object.

Example:

const imageData = ctx.getImageData(0, 0, 100, 100);  // Get pixel data
const data = imageData.data;  // data is an array of RGBA values

// Set the first pixel to red (R=255, G=0, B=0, A=255)
data[0] = 255;  // Red
data[1] = 0;    // Green
data[2] = 0;    // Blue
data[3] = 255;  // Alpha (opacity)

ctx.putImageData(imageData, 0, 0);  // Apply the pixel modifications

Compositing and Transparency

You can control how new shapes are drawn relative to existing content using the ctx.globalCompositeOperation property. The default value is 'source-over', which draws new shapes on top.

• Other options include 'destination-over', 'source-atop', 'xor', and many others.

Example:

ctx.globalAlpha = 0.5;  // Set global transparency to 50%
ctx.fillStyle = 'green';
ctx.fillRect(50, 50, 100, 100);  // Draw a semi-transparent green rectangle

Conclusion

The Canvas API, combined with the 2D rendering context (ctx), is a versatile tool for creating rich, dynamic visuals on the web. From basic shapes to complex animations and pixel manipulations, the possibilities are nearly limitless. By mastering the various methods and properties available, you can create interactive and visually engaging applications directly in the browser.

Feel free to experiment and explore beyond the examples provided to unlock the full potential of the Canvas API!