title: trying to save an html5 canvas but its blank
body: <p>I am using a website called cesium which shows me a globe of the world, it uses html5. Basically I want to save everything I see on the screen, I am new to html5/javascript...</p>
  
  <p>Everytime I tried to save the canvas it kept showing me a blank black screen. I thought this maybe because the canvas has not finished loading so I put it inside an onload function. Also tried using a timer to sleep the script from saving until after it loads. </p>
  
  <pre><code>window.onload = function(){
      var scene = viewer.scene;
      var canvas = scene.canvas;
      var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
      window.location.href=image;
  }
  </code></pre>
  
  <p>I also read it could be something related to CORS (cross origin resource sharing) but I am not getting any errors. Sorry I know this has been asked, but I am new to html5 and the other solutions did not help me. </p>
  
  <p>edit: </p>
  
  <p>Thanks for your help, as I am new to this I took a lot of time trying to understand it, even got a response on the cesium forum. I was hoping you could help me understand the issue some more..</p>
  
  <pre><code>require(['Cesium'], function(Cesium) {
      "use strict";
  
      // Cesium.CesiumWidget is similar to Cesium.Viewer, but
      // is trimmed down.  It is just a widget for the 3D globe;
      // it does not include the animation, imagery selection,
      // and other widgets, nor does it depend on the third-party
      // Knockout library.
      var widget = new Cesium.CesiumWidget('cesiumContainer',
          {
          contextOptions:{webgl:{preserveDrawingBuffer : true}
                             }});
      var scene = widget.scene;   
  
      var canvas = scene.canvas;
      var dataUrl = canvas.toDataURL("image/png");
      window.open(dataUrl,'Screenshot','toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes, resizable=yes');
      Sandcastle.finishedLoading();
  });
  </code></pre>
  
  <p>this is my code, I set the preserveDrawingBuffer to true but I still get a blank image, the cesium forum told me this</p>
  
  <pre><code>We capture the WebGL canvas on a couple of projects including Doarama.  You need to initialize the WebGL context with preserveDrawingBuffer enabled before capturing.  This can be done in Cesium like this...
  
    var scene = new Cesium.Scene(canvas, {
      webgl : {
        preserveDrawingBuffer : true
      }
    }, creditContainer);
  </code></pre>