Render canvas in a specific element

Hi. In previous versions we could provide a prop to Frame class called canvas and provide our own canvas element, allowing us to render it wherever we needed it, but in the last version this option is removed. How do I tell Frame where the canvas should be rendered to prevent it from rendering in body directly.

Hi Van, welcome to the ZIM Forum!

As far as we know we have not changed any functionality here in ZIM. Frame still has a canvasID parameter that just adjusts the id of the canvas tag - but does not affect nor has it affected the adding of the canvas.

You can remove or hide the canvas if desired once the Frame is made. In the ready event you could use:

F.canvas.style.display = "none"

If you want to provide your own tag for the ZIM canvas to be added to then use the scaling parameter of the Frame (the first parameter). This is normally FIT or FULL but you can set it to your own tag (use a div tag not a canvas tag) and the Frame canvas will be made inside that tag. See FRAME - ZIM JavaScript Canvas Framework - Code Creativity with ZIMjs! for more examples and note the TAG modes. If you provide your own tag then you can set the display:none CSS style on it.

2 Likes