0

I have been following along the tutorials from MDN on WebGL and now I wanted to export the image drawn from the canvas using toDataURL and setting the source for an <img> tag. However generating the data url only ever seems to be generating a transparent image.

I basically used the code given in the tutorial, link and augmented the index.html like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>WebGL Demo</title>
    <link rel="stylesheet" href="webgl.css" type="text/css">
  </head>

  <body>
    <canvas id="glcanvas" width="640" height="480"></canvas>
    <button id="take">SNAP</button>
    <img id="screenshot" src="" width="640" height="480">
  </body>

  <script src="gl-matrix.js"></script>
  <script src="webgl-demo.js"></script>
  <script type="text/javascript">
    take.onclick = () => {
        const dataUrl = glcanvas.toDataURL("image/png");
        console.log(dataUrl);
        screenshot.src = dataUrl;
    }
  </script>
</html>

Does anyone know why this does not work?

milck
  • 592
  • 3
  • 12
  • `take.onclick = ...`/`screenshot.src = ...` - This will most likely work but you should not rely on it, as this is no specified behavior but some nutty Microsoft stuff -> [Do DOM tree elements with ids become global variables?](https://stackoverflow.com/questions/3434278/do-dom-tree-elements-with-ids-become-global-variables) – Andreas Nov 22 '19 at 16:04
  • yeah, but this is just for testing purposes, so no worries – milck Nov 22 '19 at 17:25
  • You might find [these tutorials useful](https://webglfundamentals.org) – gman Nov 23 '19 at 01:29

0 Answers0