☰

Moo ICT – Project Based Tutorials

JavaScript Tutorial – Move an Image inside of HTML Canvas

We are getting started with the main JavaScript games development series however before we can get started with that, we need to learn the fundamentals first. In most games we will need to have a way to move an image around the games screen. This is the challenge for this tutorial. We will demonstrate how to load a image directly to the HTML Canvas and animate that image around the screen using JavaScript. This tutorial will be a quick catch up on how to do this technique and we will move on to the more interactive methods to move and interact with other objects.

C# Quiz Maker App Dev Course

  • Load Text Files and Create your own Quiz
  • Add Images and Select the right answer
  • Create a Quiz Play Window
  • Add Online URL Images to the Quiz
  • Build and Publish the Quiz Maker App

Lesson objectives –

  1. Move an Image around the border of HTML Canvas using JavaScript
  2. Create a variable object and insert sprite properties such as x, y, height and width
  3. Create the variable dynamically
  4. Use Custom functions to render the object to the screen
  5. Use Window.RequestAnimationFrame() event for the canvas
  6. Bounce the image around the border of the canvas
  7. Insert a Text into the canvas, assign custom font and size to it.
  8. Understand the basics of moving an object around the screen with a good frame rate

Video Tutorial –

Download the images here

Source Code –

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas First Project MOO ICT</title>

    <style>
        body
        {
            text-align: center;
        }
        canvas
        {
            background:url("grass.png") no-repeat;
            background-size: cover;
            border: 2px solid black;
        }
    </style>

</head>
<body>

    <h1>Moving a sprite image using js MOO ICT</h1>
    <canvas width="550" height="400"></canvas>


    <script>

        var canvas = document.querySelector("canvas");
        var drawingSurface = canvas.getContext("2d");

        var spriteObject = 
        {
            // this is a javascript object variable
            x : 0,
            y : 0, 
            width : 64, 
            height : 64
        };

        var moo = Object.create(spriteObject);
        moo.x = 100;
        moo.y = 100;
        var image = new Image();
        image.addEventListener("load", loadHandler, false);
        image.src = "moo.png";
        var Xspeed = 2;
        var Yspeed = 2;
        var text = "Hello MOO";

        function loadHandler()
        {
            update();
        }

        function update()
        {
            window.requestAnimationFrame(update, canvas);

            moo.x += Xspeed;
            moo.y += Yspeed;

            if(moo.width + moo.x > 550)
            {
                Xspeed = -2;
                text = "Going Left";
            }
            else if(moo.x < 1)
            {
                Xspeed = 2;
                text = "Going Right";
            }
            else if(moo.height + moo.y > 400)
            {
                Yspeed = -2;
                text = "Going Up";
            }
            else if(moo.y < 1)
            {
                Yspeed = 2;
                text = "Going Down"
            }

            render();
            
        }

        function render()
        {
            drawingSurface.clearRect(0,0, canvas.width, canvas.height);

            drawingSurface.drawImage
            (
            image, 
            Math.floor(moo.x), Math.floor(moo.y),
            moo.height, moo.width
            );
            drawingSurface.font = "bold 20px Arial";
            drawingSurface.fillText(text, 10, 30, 200);
            console.log(drawingSurface.measureText(text).width);
        }


    </script>


</body>
</html>

 

Tags:



Comment on this tutorial and let us know how you got on -