Couldn't init canvas using fabricjs + vuejs (this.lowerCanvasEl.getContext is not a function)

Question

I'm trying to init canvas in vuejs component. Here is an example: https://jsfiddle.net/eywraw8t/55338/

I init canvas in mounted hook, which means the DOM is available. Also I can see that fabric stars doing its job by making lower-canvas div, but then it throws:

this.lowerCanvasEl.getContext is not a function

Couldn't figure out what's the problem. I already use fabric in my project, and never got such error.

Answer 1

That's not a problem of Vue. If you take all Vue code away, the problem persists.

fabric needs to be mounted on a <canvas> element, not a <div>.

Updated fiddle here.

Demo:

new Vue({
  el: "#app",

  mounted: function() {
    new fabric.Canvas('canvas', {
      width: 500,
      height: 500
    })
  }
})

#canvas {
  width: 200px;
  height: 200px;
  background-color: green;
}

<script type="text/javascript" src="//unpkg.com/vue"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.js"></script>

<div id="app">
  <canvas id="canvas"></canvas>
</div>