p5.js-web-editor icon indicating copy to clipboard operation
p5.js-web-editor copied to clipboard

Controlling canvas size in embedded iframe

Open catarak opened this issue 5 years ago • 1 comments

"I want to include some sketches in a blog-like article via the embed feature, so I am dealing with iframes. I am having trouble to automatically get the height of my sketch, as this is of course a cross-origin scenario, so I cannot read the canvas' height via JS.

"Is this something that could/would be solved by the API? As in: I would be able to access the sketch height via the API? Or are there even any other solutions for that, that I am missing?"

Originally posted by @trych in https://github.com/processing/p5.js-web-editor/issues/1075#issuecomment-743746148

catarak avatar Dec 14 '20 16:12 catarak

One thing that comes to mind is that you could, in the embedded sketch, set the canvas size to windowWidth and windowHeight, and then set the width and height of the iframes to how big you want the sketches to be.

If you wanted to access the canvas from outside of the iframe, you'd have to use the web messaging api (i.e. window.postMessage and window.on("message")) and then have a handler within your sketch. This way is way more complicated and I think the first way I suggested is much simpler.

catarak avatar Dec 14 '20 16:12 catarak