Попытка отразить контекст холста не отображает холст

Question

Я пытаюсь перевернуть холст по горизонтали, следуя инструкциям , этому удивительному уроку mario bros . Как я уже видел во многих других ответах о переворачивании холста, я добавил следующие строки, обновляющие контекст:

    define(name, x, y, width, height) {
        const { image, } = this;
        const buffer = document.createElement('canvas');
        buffer.width = width;
        buffer.height = height;

        const context = buffer.getContext('2d');

        context.scale(-1, 1); // <<< THIS ONE
        context.translate(width, 0); // <<< AND THIS ONE

        context.drawImage(
            image,
            x,
            y,
            width,
            height, // what part of the image to draw
            0, 0, width, height); // where to draw it
        this.tiles.set(name, buffer); // store the info about the tile in our map
    }

Код, ранее работавший потрясающе. Но когда я добавляю эти строки и обновляю sh моего браузера, весь холст исчезает! Я не могу себе представить, что за последние два с половиной года с тех пор, как было сделано видео, что-то изменилось настолько, чтобы внести здесь решающие изменения? (Я полагаю, что это вообще не изменится!)

Что не так?

Answer 1

Я использую это для того, что вы хотите:

function horizontalFlip(img,x,y){
/* Move to x + image width */
context.translate(x+img.width, y);
/* scaleX by -1; this causes horizontal flip */
context.scale(-1,1);
/* Draw the image 
 No need for x,y since we've already translated */
context.drawImage(img,0,0);
/* Clean up - reset transformations to default */
context.setTransform(1,0,0,1,0,0);
}

Эта функция работает, как и ожидалось, и здесь вариант для спрайтов.

function flipSpriteHorizontal(img, x, y, spriteX, spriteY, spriteW, spriteH){
  /* Move to x + image width
    adding img.width is necessary because we're flipping from
    the right side of the image so after flipping it's still at [x,y] */
  context.translate(x + spriteW, y);

  /* ScaleX by -1, this performs a horizontal flip */
  context.scale(-1, 1);
  /* Draw the image 
   No need for x,y since we've already translated */
  context.drawImage(img,
                spriteX, spriteY, spriteW, spriteH, 
                0, 0, spriteW, spriteH
               );
  /* Clean up - reset transformations to default */
  context.setTransform(1, 0, 0, 1, 0, 0);
}