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.

acdcjunior · Accepted Answer · 2018-04-21 14:34:03Z

4

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>

answered Apr 21, 2018 at 14:34

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Victor Over a year ago

Why the hell I couldn't notice it myself. I owe you two beers :)

acdcjunior Over a year ago

Hahaha! 🍻 always glad to be of help! :D

Victor Over a year ago

The fun is that I already used fabric a lot in my project, but just didn't notice I used wrong tag... Maybe you also know why canvas can't catch drag&drop events, jsfiddle.net/eywraw8t/56370 ?

acdcjunior Over a year ago

Those listeners on that fiddle are bound to the canvas, not to the #draggable div, is that it?

Victor Over a year ago

Yeah, I want to listen when I drop the red rectangle on canvas, and I didn't manage to do it both in jsfiddle and in my project

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related