Science Knowings: HTML Course For Social Media

HTML5 Canvas API

HTML5 Canvas API

Welcome to our session on the HTML5 Canvas API. In this session, we'll explore the basics of the Canvas API, including drawing, animating, and adding interactivity.

What is the HTML5 Canvas API?

The HTML5 Canvas API is a powerful tool that allows you to create and manipulate 2D graphics in web pages.

It provides a flexible and efficient way to draw shapes, lines, text, and images on a web page.

Creating a Canvas Element

<canvas id="myCanvas" width="500" height="300"></canvas>

The <canvas> element is used to create a canvas on a web page.

The width and height attributes specify the size of the canvas.

Getting the Canvas Context

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

The getContext("2d") method returns a drawing context that you can use to draw on the canvas.

Drawing the Rectangle

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 100);

The ctx.fillStyle property sets the fill color for the rectangle.

The ctx.fillRect(x, y, width, height) method draws a filled rectangle on the canvas.

Adding Text to the Canvas

ctx.fillStyle = "black";
ctx.font = "30px Arial";
ctx.fillText("Hello Canvas!", 20, 50);

The ctx.fillStyle property sets the fill color for the text.

The ctx.font property sets the font for the text.

The ctx.fillText(text, x, y) method draws the specified text on the canvas.

Working with Colors

You can use the ctx.fillStyle and ctx.strokeStyle properties to set the fill color and stroke color for your drawings.

You can specify colors using hexadecimal values, RGB values, or color names.

Creating Gradients

var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);

Gradients allow you to create smooth transitions between colors.

The ctx.createLinearGradient(x0, y0, x1, y1) method creates a linear gradient.

The addColorStop(offset, color) method adds a color stop to the gradient.

Drawing Images

var image = new Image();
image.onload = function() {
    ctx.drawImage(image, 10, 10);
};
image.src = "image.png";

The drawImage(image, x, y) method draws the specified image on the canvas.

Canvas Transformation

Transformations allow you to translate, rotate, scale, and skew your drawings.

The ctx.translate(x, y) method translates the canvas by the specified amount.

The ctx.rotate(angle) method rotates the canvas by the specified angle.

The ctx.scale(x, y) method scales the canvas by the specified amount.

The ctx.skew(x, y) method skews the canvas by the specified amount.

Animating on Canvas

You can use the window.requestAnimationFrame() method to animate your drawings.

The requestAnimationFrame() method calls a specified function repeatedly, allowing you to create smooth animations.

Canvas Events

You can add event listeners to the canvas to respond to user interactions.

The canvas.addEventListener(event, callback) method adds an event listener to the canvas.

You can use event listeners to handle events such as mouse clicks, mouse movements, and keyboard presses.

Canvas Performance Tips

  • Use the correct canvas size for your needs.
  • Avoid using too many gradients and images.
  • Use the ctx.globalCompositeOperation property to optimize drawing operations.
  • Use the requestAnimationFrame() method to optimize animations.
  • Saving and Exporting Canvas

    You can save your canvas as an image using the canvas.toDataURL() method.

    The toDataURL() method returns a base64-encoded string that represents the canvas image.

    Next Topic: HTML5 Web Storage API

    In the next session, we'll explore the HTML5 Web Storage API, which allows you to store data on the client side.

    Follow us to learn more!