not updating element

[bknill]

Hi,

Great component.. thanks.

I've picked this up from en existing project and I'm trying to enable updating an element, This component is working the first time, but after I try and update it just turns into a white box.

Here is my component:

`AFRAME.registerComponent('hotspots-button', {
  dependencies: ['draw'],
  schema: {
    text: {type: 'string', default: ''},
    icon: {type: 'string', default: ''},
  },
  _imageURL: '',

  init: function() {
    this.draw = this.el.components.draw
    this.draw.register(this.render.bind(this))

  },

  update: function () {
    this.draw.render()
    this.el.children[0].setAttribute('src', this._imageURL)
  },

  render: function () {
    let ctx = this.draw.ctx
    let canvas = this.draw.canvas
    blackCurvedImage(canvas, ctx, canvas.width, canvas.height, this.data.text)
    this._imageURL = canvas.toDataURL('image/png',1.0)
  },
})`

The blackCurvedImage function makes the changes to the canvas i.e.

export function blackCurvedImage(canvas, ctx, width, height, text) {
  // Clean context
  ctx.clearRect(0, 0, width, height)
  // Container
  ctx.strokeStyle = classicWhiteOutlineRGBA
  ctx.fillStyle = classicBlackFillRGBA
  roundRect(ctx, 0, 0, width, height, 20, true) 
...

However changes are not being reflected.

Currently it's just turning the canvas white.

Any ideas on how to manage updates?

[maxkrieger]

Hi,
Apologies, it's been a while since I updated this repo, and it's not as simple to use as I remember.

I'm not sure why you're manually setting the image data URI. Have you tried commenting out this._imageURL usage?