Как правильно добавлять в canvas динамически созданное изображение?

Question

[s24344]

Здравствуйте. Помогите пожалуйста решить следующую задачу. В приложении, написанном на Vue.js создаю img, затем пытаюсь добавить его в canvas но у меня не выходит. Подскажите, что я делаю не так.

<template>
    <div>
        <canvas id="supercanvas" ref="supercanvas" width="800" height="600"></canvas>
    </div>
</template>
<script>
export default {
  mounted: function() {
    const canvas = this.$refs.supercanvas;
    const ctx = canvas.getContext('2d');

    const img = new Image();

    img.src = '../assets/1.jpg';

    let i = 0;
    function draw () {
      i++;

      ctx.clearRect(0, 0, 800, 600);

      ctx.drawImage(img, 0, 0, 800, 600);

      window.requestAnimationFrame(draw);
    }
    draw();
  }
}
</script>

(В Network указывается не jpeg, а text/html)

Answer 1

[0xD34F]

В Network указывается не jpeg, а text/html

Путь неправильный. Или сервер файл не отдаёт. Вы бы посмотрели, что там в этом text/html - должно быть написано.

Ну и зачем тут requestAnimationFrame - я без понятия. Выглядит бредово. Есть же обработчик onload - в нём и рисуйте:

mounted() {
  const img = new Image();
  img.onload = () => this.$refs.canvas.getContext('2d').drawImage(img, 0, 0);
  img.src = '...';
},

https://jsfiddle.net/bd0ro2yL/