Setting canvas context

[jamesgrubb]

Hi going round in circle here and hope you can help. I'm trying set a canvas's context and draw an image codepen context.drawImage(image,0,0)

<div class="wrapper" x-data="app()" x-init="init($refs)">
  <canvas x-ref="canvas"></canvas>
  <label for="input">grab image</label>
  <input type="file" id="input" name="input" @change="fileInput($event)">
</div>

javascript

function app() {
  const image = new Image();
  let file;
  let reader = new FileReader();
  return {
    init($refs) {
      this.canvas = $refs.canvas;
    },
    fileInput($event) {
      file = $event.target.files[0];
      const ctx = this.canvas.getContext("2d");
      image.addEventListener("load", function (event) {
        this.canvas.width = image.width;
        this.canvas.height = image.height;
        ctx.drawImage(image, 0, 0);
        console.log(event);
      });
      image.src = this.src;
      reader.addEventListener("load", (event) => {
        this.src = event.target.result;
      });
      reader.readAsDataURL(file);

    },
    canvas: "",
    src: ""
  };
}

[KevinBatdorf]

Instead of passing in $refs, you can just use this.canvas = this.$refs.canvas;