Canvas - refresh doesn't work as i expected

Question

I am learning how to create game in JS, I added the background, character and movement. When i dont have ctx.clear(..), character is moving but dont clear prev image, when i have ctx.clear i dont see my character...

I tried use setInterval as update function, but there my character is blinking and still its no good option to create update/refresh

document.addEventListener('DOMContentLoaded', () => {
    window.requestAnimationFrame(update.bind(this));
    update();
    movingCharacter.moving(ctx);
});


function update() {
    let now
    let then = Date.now();
    let delta;

    now = Date.now();
    delta = now - then;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawFigure.draw(ctx, 0, 0, windowsWidth, windowsHeight,'#000000');
    drawImages.draw(ctx, imagesCharacterList.panda, pandaPosition[0], 
    pandaPosition[1], 50, 50);
    window.requestAnimationFrame(update.bind(this));
}



export default class DrawImages {
    draw(ctx, image, x, y, width, height) {
        const img = new Image();
        img.src = image;
        img.onload = () => {
            ctx.drawImage(img, x, y, width, height);
        }    
    }
}



export const pandaPosition = [100, 200];

export class MovingCharacter {
    moving(ctx) {
        document.addEventListener('keydown', (key) => {
            switch (true) {
                case key.keyCode === 87: 
                        pandaPosition[1] -= 1;
                    break;

                case key.keyCode === 83: 
                        pandaPosition[1] += 1;
                    break;

                case key.keyCode === 68: 
                        pandaPosition[0] += 1;
                    break;

                case key.keyCode === 65: 
                        pandaPosition[0] -= 1;
                    break;

                case key.keyCode === 32: 
                        pandaPosition[1] -= 10;
                            // ctx.clearRect(0, 0, window.innerWidth,                     window.innerHeight);

                    break;
            }    
        })
    }
}

I want to moving my character and see it...

Answer 1

Basically, as Wiktor Zychla says, you shouldn't have your image load every time you want to draw.

Load the image when you create the DrawImages class, then only draw the image in the update loop.

class DrawImages {
    constructor(imageurl, ctx, x, y, width, height)
    {
       this.img = new Image();
       this.img.src = imageurl;
       this.img.onload = () => {
            ctx.drawImage(this.img, x, y, width, height);
       }    
    }
    draw(ctx, x, y, width, height) {
        ctx.drawImage(this.img, x, y, width, height);
    }
}

//I guess this goes in a different module
const drawImages = new DrawImages("https://example.com/image.jpg", ctx, pandaPosition[0], pandaPosition[1], 50, 50);

You might want to do something different in the onload, but this basically works.

var canvas = document.getElementById('canv');
var ctx = canvas.getContext('2d');

document.addEventListener('DOMContentLoaded', () => {
    window.requestAnimationFrame(update.bind(this));
    update();
    movingCharacter.moving();
});

function update() {
    let now
    let then = Date.now();
    let delta;

    now = Date.now();
    delta = now - then;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawImages.draw(ctx, pandaPosition[0], pandaPosition[1], 32, 32);
    window.requestAnimationFrame(update.bind(this));
}



class DrawImages {
    constructor(imageurl, ctx, x, y, width, height)
    {
       this.img = new Image();
       this.img.src = imageurl;
       this.img.onload = () => {
            ctx.drawImage(this.img, x, y, width, height);
       }    
    }
    draw(ctx, x, y, width, height) {
        ctx.drawImage(this.img, x, y, width, height);
    }
}

const pandaPosition = [100, 200];

const drawImages = new DrawImages("https://www.gravatar.com/avatar/0552c7e9c1da444137e8b235576e516d?s=64&d=identicon&r=PG", ctx, pandaPosition[0], pandaPosition[1], 32, 32);

class MovingCharacter {
    moving() {
        document.addEventListener('keydown', (key) => {
            switch (true) {
                case key.keyCode === 87: 
                        pandaPosition[1] -= 1;
                    break;

                case key.keyCode === 83: 
                        pandaPosition[1] += 1;
                    break;

                case key.keyCode === 68: 
                        pandaPosition[0] += 1;
                    break;

                case key.keyCode === 65: 
                        pandaPosition[0] -= 1;
                    break;

                case key.keyCode === 32: 
                        pandaPosition[1] -= 10;

                    break;
            }    
        })
    }
}

var movingCharacter = new MovingCharacter();

<canvas id="canv" width="300" height="300">