the question may seem simple, but I can not understand what is my mistake.

I draw images on my canvas, everything is fine, but at the moment when I add clearRect, the elements are completely removed from the canvas without restoring them. Although the cleanup cycle should happen before the rendering

what's my mistake? everything seems to be simple, but I'm stuck with it for a very long time

App main game class

Game class - responsible for rendering to the canvas and clearing it

player - responsible for the logic of the player's behavior

animation - requestanimationframe is called in this function, on the function passed to it

        class App {
    
        constructor() {
    
            this.player = new Player("Player 1", 0, 102);
            this.game = new Game();
    
            this.game.CreateCanvas();
    
            window.addEventListener('keyup', () => this.player.UpKey());
            window.addEventListener('keydown', (event)=> this.player.HandlerKeyPress(event));
    
            new Animation(this.Display.bind(this));
    
        }
    
        Display() {
    
            this.game.ClearCanvas();
            this.SetLevel();
    
        }
    
        SetLevel() {
    
            this.game.LoadSprite(assets.mario, [...player_assets.mario.small.standing_right,  ...this.player.GetPosition(), 16, 16]);
            this.StaticObject();
    
        }
    
        StaticObject () {
    
            for(let i = 0; i < 32; i  ){
    
                this.game.LoadSprite(assets.block, [...lvl_1.block.ground.size,  i* 16, 134, 16,16]);
                this.game.LoadSprite(assets.block, [...lvl_1.block.ground.size,  i* 16, 118, 16,16]);
            
            }
    
        }
    
    }
    
    new App();
    
    export default class Game {
    
        CreateCanvas () {
    
            this.canvas = document.createElement("canvas");
    
            this.ctx = this.canvas.getContext("2d");
    
            document.body.appendChild(this.canvas);
    
        }
    
        ClearCanvas() {
    
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    
        }
    
        SetBackgroundColor (color) {
    
            this.ctx.fillStyle = color;
            this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
    
        }
    
        LoadSprite (src, position) {
            
            const _image = new Image();
    
            _image.src = src;
    
            _image.onload = () => {
    
                this.ctx.drawImage(_image, ...position, true);
    
            }
    
        }
    
    }

export default class LoopAnimation {

    constructor(display) {

        this.display = display;

        this.Animation = this.Animation.bind(this);

        this.Animation();

    }

    Animation() {

        requestAnimationFrame(this.Animation);

        this.display();

    }

}

CodePudding user response：

My suspicion is it's related to cache and event onl oad not firing. image.onload event and browser cache suggests to set the onload property before the src.

var img = new Image();
img.onload = function () {
   alert("image is loaded");
}
img.src = "img.jpg";

If you want to reuse loaded images, then store them in an array. Then reuse the image from there. See for example:

const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
canvas.width = 450;
canvas.height = 250;
const ctx = canvas.getContext("2d");

const assets = [
  "https://picsum.photos/id/237/150",
  "https://picsum.photos/id/235/150",
  "https://picsum.photos/id/232/150",
];
const assetsLoaded = assets.map(url =>
  new Promise(resolve => {
    const img = new Image();
    img.onload = e => resolve(img);
    img.src = url;
  })
);

Promise
  .all(assetsLoaded)
  .then(images => {
    (function gameLoop() {
      requestAnimationFrame(gameLoop);
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      images.forEach((e, i) =>
        ctx.drawImage(
          e, 
          i * 150   Math.cos(Date.now() * 0.003   i) * 20, // x
          Math.sin(Date.now() * 0.005   i) * 50   50 // y
        )
      );
    })();
  })
  .catch(err => console.error(err))
;

// from https://stackoverflow.com/a/61337279/3807365