Multiple canvas elements

Questions
1

Are multiple ZIM canvases on a page supported? I am trying ...

// --- ZIM Frames ----------------------------------------
new Frame ('zimControls',
ZIM_CONTROLS_WIDTH, ZIM_CONTROLS_HEIGHT,
'rgba(0,0,0,0)', 'rgba(0,0,0,0)',
() => { if (window.zimReady) window.zimReady(); }
)

new Frame('zimDisplay',
ZIM_DISPLAY_WIDTH, ZIM_DISPLAY_HEIGHT,
'rgba(0,0,0,0)', 'rgba(0,0,0,0)',
() => { if(window.zimDisplayReady) window.zimDisplayReady(); }
)

The console shows two frames, and no errors. Inspecting page elements, I see two canvases with the expected ids. But all the action seems to occur to whichever is the last frame created.

Thanks!

2

Yes - this is supported. You need to set the nextFrame parameter of the second Frame - or later created Frame. Also, in the second frame, the default stage to add to with methods like center(), loc(), pos() is still the first frame unless you use F2.setDefault() - you can grab a reference to F2 by using the parameters of the ready callback - or you can store the second frame in a variable f2.

const f1 = new Frame(FIT, 1024, 768, light, dark, ready);
function ready() {
  new Rectangle(100,100,red).loc(100,100).drag();
}

new Frame({scaling:FIT, width:1024, height:768, color:clear, outerColor:dark, ready:ready2, nextFrame:f1});
function ready2(F2, S2) {
  F2.setDefault();
  new Circle(50,pink).center().drag(); // now gets added to this frame
  // without the setDefault() it would go to f1's stage.
  // or you could use new Circle().center(S2); 
  // without adding setDefault()
}
1 Like
3

Just what I needed! Thank you.

1 Like