¿Cómo uso un lienzo dentro de un iframe en espacio aislado del padre y del mismo origen? Por ejemplo:

HTML:

 <iframe id="myIframe" sandbox="allow-forms allow-same-origin" srcDoc='<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;display: block"></canvas>'

JS:

 var iframeDocument = document.getElementById("myIframe").contentDocument var c = iframeDocument.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke();

El código anterior simplemente no funcionaría, pero el código funciona en un lienzo normal, no dentro de un iframe.