<canvas id="myCanvas"></canvas>
<img src="https://i.imgur.com/30NXFj4.png" id="koopa" style="display: none" alt="" />
<p>Read more about how this is used: <a href="https://www.endyourif.com/experimenting-with-the-canvas-for-a-basic-walk-animation/">Animation using the canvas tag</a></p>var myCanvas;
var context;
var koopa;
var x = 0;
var timer;
var walker = 300;
$(document).ready(function() {
myCanvas = document.getElementById('myCanvas');
context = myCanvas.getContext('2d');
koopa = document.getElementById('koopa');
timer = setInterval("drawFrameLeft()", walker);
});
function drawFrameLeft() {
context.clearRect(0, 0, 300, 300);
context.drawImage(koopa, 215 + (x * 30), 0, 30, 45, 0 + (x * 30), 0, 30, 45);
x++;
if (x > 5) {
x = 0;
clearInterval(timer);
timer = setInterval("drawFrameRight()", walker);
}
}
function drawFrameRight() {
context.clearRect(0, 0, 300, 300);
context.drawImage(koopa, 155 - (x * 30), 0, 30, 45, 150 - (x * 30), 0, 30, 45);
x++;
if (x > 5) {
x = 0;
clearInterval(timer);
timer = setInterval("drawFrameLeft()", walker);
}
}
External CSS
This Pen doesn't use any external CSS resources.