[Vuejs]-Can’t access to custom canvas attribute in Vue

by

0👍

The canvas element is at Your disposal in the el.components.draw.canvas reference.

You can either create Your standalone vue script, or attach it to an existing component like this: 

AFRAME.registerComponent("vue-draw", {
init: function() {
  const vm = new Vue({
    el: 'a-plane',
    mounted: function() {
      setTimeout(function() {
        var draw = document.querySelector('a-plane').components.draw; /
        var ctx = draw.ctx;
        var canvas = draw.canvas;
        ctx.fillStyle = 'red';
        ctx.fillRect(68, 68, 120, 120);
        draw.render();
      }, 100)
    }
  });
}
})

Working fiddle: https://jsfiddle.net/6bado2q2/2/
Basically, I just accessed the canvas, and told it to draw a rectangle.

Please keep in mind, that Your error may persist when You try to access the canvas before the draw component managed to create it.

My no-brainer solution was just a timeout. Since the scene loads, and starts rendering faster, than the canvas is being made, I would suggest making a interval checking if the canvas element is defined somehow, and then fire the vue.js script.

Also keep in mind, that You can work on existing canvas elements with the build in canvas texture: https://aframe.io/docs/0.6.0/components/material.html

Leave a comment