Struggling to create an engaging canvas animation with the image provided in the link below.
Please take a look at https://i.stack.imgur.com/Pv2sI.jpg
I'm attempting to run this sprite sheet image for a normal animation, but unfortunately, I seem to be encountering some issues.
Here is the code snippet I have been working on:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<canvas id='canvas'></canvas><br />
<button onclick='moveLeft()'>Left</button>
<button onclick='moveRight()'>Right</button>
<script>
var canvasWidth = 650;
var canvasHeight = 350;
var spriteWidth = 379;
var spriteHeight = 133;
var rows = 2;
var cols = 8;
var trackRight = 0;
var trackLeft = 1;
var width = spriteWidth/cols;
var height = spriteHeight/rows;
var curFrame = 0;
var frameCount = 8;
var x=0;
var y=200;
var srcX;
var srcY;
var left = false;
var right = true;
var speed = 12;
var canvas = document.getElementById('canvas');
canvas.width = canvasWidth;
canvas.height = canvasHeight;
var ctx = canvas.getContext("2d");
var character = new Image();
character.src = "jpg.jpg";
function updateFrame(){
curFrame = ++curFrame % frameCount;
srcX = curFrame * width;
ctx.clearRect(x,y,width,height);
if(left && x>0){
srcY = trackLeft * height;
x-=speed;
}
if(right && x<canvasWidth-width){
srcY = trackRight * height;
x+=speed;
}
}
function draw(){
updateFrame();
ctx.drawImage(character,srcX,srcY,width,height,x,y,width,height);
}
function moveLeft(){
left = true;
right = false;
}
function moveRight(){
left = false;
right = true;
}
setInterval(draw,100);
</script>
</body>
</html>
The current behavior of the animation is not as expected, only showing the center area of the image. Any suggestions on how to resolve this issue?