JavaScript Tutorial – Move an Image inside of HTML Canvas
- Subject: Javascript Tutorials
- Learning Time: 30 mins
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.
Lesson objectives –
- Move an Image around the border of HTML Canvas using JavaScript
- Create a variable object and insert sprite properties such as x, y, height and width
- Create the variable dynamically
- Use Custom functions to render the object to the screen
- Use Window.RequestAnimationFrame() event for the canvas
- Bounce the image around the border of the canvas
- Insert a Text into the canvas, assign custom font and size to it.
- Understand the basics of moving an object around the screen with a good frame rate
Video Tutorial –
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>