Animation in Canvas simple html js code Example

Graphic Animation in Canvas simple HTML JS code

Here's a simple HTML and JavaScript code snippet that creates an animation using the HTML5 canvas element:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Animation</title>
        canvas {
            border: 1px solid black;
    <canvas id="myCanvas" width="500" height="500"></canvas>

        // Get the canvas element and its context
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");

        // Initial position of the object
        var x = 50;
        var y = 50;

        // Speed and direction of the object
        var dx = 2;
        var dy = 2;

        // Function to draw the object
        function draw() {
            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Draw the object (a simple circle in this case)
            ctx.arc(x, y, 20, 0, Math.PI * 2);
            ctx.fillStyle = "blue";

            // Update the position of the object
            x += dx;
            y += dy;

            // Check boundaries and change direction if necessary
            if (x + dx > canvas.width || x + dx < 0) {
                dx = -dx;

            if (y + dy > canvas.height || y + dy < 0) {
                dy = -dy;

            // Request animation frame to create a smooth animation loop

        // Call the draw function to start the animation

In this example, a blue circle moves around the canvas. The draw function is responsible for clearing the canvas, drawing the circle, updating its position, and checking boundaries to change its direction when it hits the canvas edges. The requestAnimationFrame function is used to create a smooth animation loop. You can modify the initial position, speed, size, and other properties to customize the animation as you like.



Canvas Animation

Comments :

Post a Comment