Print or Export Cesium Map Loading Division

I am in a need to print and share the HTML division where my cesium map loads. I used the simple cesium app creating tutorials and some JavaScript codes in order to enable the facility. Currently I am able to print the entire screen but my code is unable to get the contents of the division where the cesium map loads. You can find the screenshot below:

My JavaScript Code is as follows:

    var viewer = document.getElementById("cesiumContainer");
    function print_voucher()
        var win =;
        win.document.write("<br><img src='"+viewer.toDataURL()+"'/>");
    $("#printVoucher").click(function(){ print_voucher(); });

I need to enable the user to share the Desktop view by printing the page including the loaded 3D models on cesium map.

I am using the latest version of cesium, My Operating System is Win10, FireFox Developer is my browser.

The GitHub project link is available here

This happens because by the time you’re taking the screenshot, the WebGL drawing buffer has already been swapped out. This happens for performance reasons, you can read more about it here:

To force it to keep the buffer until the next redraw, pass the preserveDrawingBuffer option to the viewer as shown below:

var viewer = new Cesium.Viewer(‘cesiumContainer’, {

contextOptions: {

webgl: {

preserveDrawingBuffer: true





Then calling toDataURL should work.

Omar and Basil,

I’d suggest doing something like this instead:

Using preserveDrawingBuffer has a cost every frame, but you don’t need to pay it as long as you grab the content of the Canvas inside postRender.


Thanks @Omar Shehata for extending resourceful help to me. It works for me.

Attaching the updated **GitHub **Project Link.

  • Basil

@Kevin Thanks for the response. I haven’t tried this one as the reply by @Omar Shehata was satisfying. Once again thanks.

Find the attached Link for GitHub Project link Here.

  • Basil

I hope I can help you.