I'm using polymer to render certain things to a canvas. The canvas is overlaid on some video and it is performing annotations of object video analytics style. Each rendering element represents a certain type of object that needs to be rendered, e.g, zones, lines, streaming annotation. Having the logic for each element mean that the encapsulation of the code is sane.
I have multiple polymer elements that need to render to the same canvas. Is the best way to do this to pass the canvas id into the elements?
<canvas id="myCanvas"></canvas>
<rendering-element canvas="myCanvas"></rendering-element>
<other-rendering-element canvas="myCanvas"></other-rendering-element>
<rendering-element canvas="myCanvas"></rendering-element>
The elements will use document.getElementById('myCanvas') and use the returned element to render their data.
Is this the best practice for this?