HTML5 Canvas no method 'toDataURL'

Question

My Code is like this

    <html>
  <head>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200" style="display:none;"></canvas>
    <img id="canvasImg" onclick="myFunction()" alt="Right click to save me!">
    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        function myFunction() {
            var c = document.getElementsByTagName("canvas");
            // save canvas image as data url (png format by default)
            var dataURL = c.toDataURL();
            // set canvasImg image src to dataURL
            // so it can be saved as an image
            document.getElementById('canvasImg').src = dataURL;
        }
    </script>
  </body>
</html>

When i click on canvasImg its throwing an error

Uncaught TypeError: Object #<NodeList> has no method 'toDataURL'

I have made a fiddle here Can any one point out whats going wrong?

Voonic · Accepted Answer · 2013-11-01 07:39:50Z

5

DEMO

document.getElementsByTagName returns array of elements objects, and no array objects have method toDataUrl

instead of this

var c = document.getElementsByTagName("canvas");

use

 var c = document.getElementsByTagName("canvas")[0];

edited Nov 1, 2013 at 7:39

answered Nov 1, 2013 at 7:33

Voonic

4,7733 gold badges29 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Scott Selby · Accepted Answer · 2013-11-01 07:39:58Z

2

    function myFunction() {
         var canvas = document.getElementById("myCanvas");
         var context = canvas.getContext("2d");
         var img = document.getElementById("canvasImg");
         context.drawImage(img, 0, 0);
    }

answered Nov 1, 2013 at 7:39

Scott Selby

9,58012 gold badges63 silver badges97 bronze badges

Collectives™ on Stack Overflow

HTML5 Canvas no method 'toDataURL'

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related