Search code examples
javascriptmagic-mirror

Canvas not showing even though the code is there

I am trying to show a Gauge on my Magic Mirror Dashboard in my module programmatically.

The below is a sample of my code:

    var indoorGauge = document.createElement('canvas');
    indoorGauge.id = 'indoorGauge';
    ...
    indoorGauge.setAttribute('data-animation-target','plate');  
    indoorPressure.appendChild(indoorGauge);        
    insideTele.appendChild(indoorPressure);
    wrapper.appendChild(insideTele);

The gauge doesn't show or render. What I'm finding odd is that when I inspect element, the canvas is all there and it works, because when I cut out the element and re-paste it, it will show up and work perfectly!

enter image description here

If I 'cut' and 'paste' the above canvas element, the gauge will show just fine.

enter image description here

Solution

  • According to the documentation, you should be using their API if you want to load a gauge with Javascript.

    const indoorGauge = document.createElement('canvas');

indoorGauge.id = "indoorGauge"
document.body.appendChild(indoorGauge);

new LinearGauge({
  renderTo: 'indoorGauge'
}).draw();
    <script src="https://unpkg.com/canvas-gauges@2.1.7/gauge.min.js"></script>

    I would imagine that because you are appending the canvas with Javascript, but not using the gauge API that's why you're seeing issues with the script not picking up your dynamically created canvas element the first time you add it