Completely reloading a canvas element with data-pr

问题:

<div class="Container"><div class="SubContainer">
<canvas id="gamecanvas" data-processing-sources="canvas.pde">
ERROR - No canvas support on browser
</canvas>
</div></div>

<div class="Container"><div class="SubContainer">
<canvas id="hudcanvas" data-processing-sources="hud.pde">
ERROR - No canvas support on browser
</canvas>
</div></div>

I have these two canvas's using processing.js and WebGL 3D, and basically I need them to reload in order to adjust their size. I tried using jQuery to clone them, remove them, and then append them to the body, but it doesn't work. The canvas's were appended and they had all their properties, but my guess would be the data-processing-sources wasn't able to do its thing.

So how can I get these canvas's to completely reload, including re-running their data-processing-sources?

回答1:

This can be done by using an iframe to another page with your canvas that you can resize and refresh while still on your main page.