CODEWITHSUNDEEP
vue.jscanvas
StickyNote3467
StickyNote3467

Reputation: 23

Why can't I access html canvas in vue?

I'm trying to make a canvas element in vue. I'm having trouble with the canvas instance. I believe I'm not declaring or using it properly. The error i get is:

TypeError: Cannot set property 'linewidth' of null at VueComponent.draw (HelloWorld.vue?140d:55)

How can I access

My Template:

  <div id="app">
    <canvas
      v-on:mousedown="startPainting()"
      v-on:mouseup="finishedPainting()"
      v-on:mousemove="draw()"
      id="canvas"
    ></canvas>
  </div>

My js

<script>
export default {
  name: "HelloWorld",

  data: () => ({
    canvas: null,
    ctx: null,
    message: "Henlo vue!",
    vueCanvas: null,
    painting: false
  }),

  mounted() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    this.vueCanvas = ctx;
  },

  methods: {
    startPainting: function() {
      this.painting = true;
      console.log(this.painting);
    },
    finishedPainting: function() {
      this.painting = false;
      console.log(this.painting);
    },
    draw: function(e) {
      if (this.painting) {
        console.log("henlo painting!");
        this.ctx.linewidth = 10;
        this.ctx.lineCap = "round";
        this.ctx.linTo(e.clientX, e.clientY);
        this.ctx.stroke();
      }
    }
  }
};
</script>

Upvotes: 1

Views: 1479

Answers (1)

palaѕн
palaѕн

Reputation: 73906

Few Issues Here:

  • Its actually lineWidth, not linewidth.
  • You are using this.ctx but ctx is set to this.vueCanvas = ctx. So, you need to use this.vueCanvas instead.
  • Its actually lineTo, not this.ctx.linTo.
  • You are using draw: function(e), but have not passed the event in the template. You need to first pass it like v-on:mousemove="draw($event)".

Working Demo:

new Vue({
  el: "#myApp",
  data: () => ({
    canvas: null,
    ctx: null,
    message: "Hello Vue!",
    vueCanvas: null,
    painting: false
  }),

  mounted() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    this.vueCanvas = ctx;
  },

  methods: {
    startPainting: function() {
      this.painting = true;
      //console.log(this.painting);
    },
    finishedPainting: function() {
      this.painting = false;
      //console.log(this.painting);
    },
    draw: function(e) {
      if (this.painting) {
        //console.log("henlo painting!");
        this.vueCanvas.lineWidth = 10;
        this.vueCanvas.lineCap = "round";
        this.vueCanvas.lineTo(e.clientX, e.clientY);
        this.vueCanvas.stroke();
      }
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="myApp">
  <canvas
      v-on:mousedown="startPainting()"
      v-on:mouseup="finishedPainting()"
      v-on:mousemove="draw($event)"
      id="canvas" width="600" height="250" style="border:1px solid #d3d3d3;"
    ></canvas>
</div>

Upvotes: 1

Related Questions