Draw the ouput of a webglearth canvas to a 2d canvas

Question

I am trying to copy the output of a canvas running webglearth (http://www.webglearth.org/) to a standard 2d canvas. I followed the answer to this question, but I can only see the background colour of the canvas.

My code is:

<html>
<body>
    <div id="earthDiv" style="background-color:rgba(255,0,255,0.5); width:500px; height: 500px;"></div>
    <canvas id="canvas" style="background-color:rgba(0,255,0,0.5); width:500px; height: 500px;"></canvas>

    <script src="http://www.webglearth.com/v2/api.js"></script>

    <script type="text/javascript">
        window.onload = function () {

            var earth = new WE.map("earthDiv");
            var earthCanvas = earth.canvas;
            var earthContext = earthCanvas.getContext("webgl", {
                preserveDrawingBuffer: true,
            });

            WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {}).addTo(earth);

            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            setInterval(function () {
                context.drawImage(earthContext.canvas, 0, 0);
            }, 1000);
        };
    </script>
</body>
</html>

Josiki · Accepted Answer · 2018-10-17T13:36:40.147

Turns out this is an issue: https://github.com/webglearth/webglearth2/issues/104 , where the context for the canvas needs "preserveDrawingBuffer: true" when it is got for the first time.

It can be worked around by changing

 Cesium.Scene({
            canvas: this.canvas,
            contextOptions: { webgl: { alpha: !0 !== c.sky } }
        });

in http://www.webglearth.com/v2/api.js to

Cesium.Scene({
            canvas: this.canvas,
            contextOptions: { webgl: { alpha: !0 !== c.sky, preserveDrawingBuffer: true } }
        });

(and then saving it and using it as a local file).

It can be worked around by getting a png image using

earth.getScreenshot(function(dataUrl) {...}))

(see https://github.com/webglearth/webglearth2/issues/60 )

However the png approach does not perform amazingly.

Welcome to stackoverflow. Please put the answer in the answer itself. Don't just link to the answer somewhere else. thanks! — gman, Oct 16 '18 at 16:41

Draw the ouput of a webglearth canvas to a 2d canvas

1 Answers1