Clearing drawImage() function in Javascript

Question

How can I get the canvas to clear the previous image so that it looks like my character is moving? Right now, it is showing every animation of my character as he moves across the screen. I posted a picture below.

Here is my Javascript

function update(){
var imageObj = new Image();
if(fr1){
imageObj.src = 'https://i.ibb.co/yhbRD1R/Mega1.png';
}

if(fr2){
imageObj.src = 'https://i.ibb.co/S74hLKX/Mega2.png';
}
if(fr3){
imageObj.src = 'https://i.ibb.co/tC1j7wC/Mega3.png';
}
if(fr4){
imageObj.src = 'https://i.ibb.co/Tr2cqH9/Mega4.png';
}
if(fr5){
imageObj.src = 'https://i.ibb.co/jvr49xx/Mega5.png';
}

if(fr6){
imageObj.src = 'https://i.ibb.co/BrQnPNR/Mega6.png';
}
if(fr7){
imageObj.src = 'https://i.ibb.co/CJdzqGR/Mega7.png';
}
if(fr8){
imageObj.src = 'https://i.ibb.co/frbN0Dj/Mega8.png';
}
if(fr9){
imageObj.src = 'https://i.ibb.co/RjLL6z1/Mega9.png';
}
if(fr10){
imageObj.src = 'https://i.ibb.co/2ypxYjw/Mega10.png';
}
var canvas= document.getElementById('canvas');
var context = canvas.getContext('2d');

image1.style.visibility="hidden";
imageObj.onload = function() {

context.drawImage(imageObj,mainx,mainy,100,100);
};

}

Here is what's happening:

Here is what's happening:

can you maybe provide a runnable snippet? Either by adding a code snippet (using CTRL+ M) or adding a js fiddle? — Nick Parsons, Jan 30 '19 at 03:05
Not directly related, but **Do never load new assets when your game is running**. You should load all these images once, before starting anything else. Then you'll just draw these loaded images *(which would even be better in a single image file)* — Kaiido, Jan 30 '19 at 03:27

Nick Parsons · Accepted Answer · 2019-08-05T07:14:34.643

You can use context.clearRect(x, y, width, height) every time your new image loads. Also, I've simplified your code a little by putting all your animation sprites into an array, and then selecting the given frame using the frameCount % frames.length. Here frameCount is a variable which is incremented every game-loop (every time setInterval runs). Thus, using the modulo operator % you can restrict the number to be between 0 and the length of the array, allowing you to select a new frame from your frames array each time your loop runs.

See working example below:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var mainx = 0;
var mainy = canvas.height/2;

var frames = ['https://i.ibb.co/yhbRD1R/Mega1.png',
'https://i.ibb.co/S74hLKX/Mega2.png',
'https://i.ibb.co/tC1j7wC/Mega3.png',
'https://i.ibb.co/Tr2cqH9/Mega4.png',
'https://i.ibb.co/jvr49xx/Mega5.png',
'https://i.ibb.co/BrQnPNR/Mega6.png',
'https://i.ibb.co/CJdzqGR/Mega7.png',
'https://i.ibb.co/frbN0Dj/Mega8.png',
'https://i.ibb.co/RjLL6z1/Mega9.png',
'https://i.ibb.co/2ypxYjw/Mega10.png'];

function update(fr) {
  var imageObj = new Image();
  imageObj.src = frames[fr];
  
  imageObj.onload = function() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(imageObj, mainx, mainy, 100, 100);
  };
  
  mainx = (mainx + 10) % canvas.width; // update position of character
  frameCount += 1; // update frame count to move to next image frame
}

var frameCount = 0;
setInterval(function() {
  update(frameCount % frames.length);
}, 100)

<canvas id="canvas" height="200" width="500" style="border: 1px solid black;"></canvas>

score 0 · Answer 2 · answered Jan 30 '19 at 03:12

0

Try putting context.clearRect(0, 0, canvas.width, canvas.height); before the context.drawImage(imageObj,mainx,mainy,100,100);.

answered Jan 30 '19 at 03:12

ArtemPetrov

53
4

Clearing drawImage() function in Javascript

2 Answers2