javascript - toDataURL returns error "Uncaught TypeError: Cannot read property '0' of undefined &qu

I'm new to javascript and am having an error. I'm sure I am skipping some basic concept... sorry.

here is the problem.

I use on my html this code:

<div>
<script type='text/javascript'>
var myCanvas = document.getElementsByTagName("canvas");
document.write('<img src="'+myCanvas[0].toDataURL("image/png")+'"/>');

</script></div>

I have only one canvas on my document. The error I see in chrome is:

Uncaught TypeError: Cannot read property '0' of undefined sankey.html:128 (anonymous function)

If I enter

document.write('<img src="'+myCanvas[0].toDataURL("image/png")+'"/>');

(the exact same line) in the java script chrome console, it works! How is this possible?

I'm new to javascript and am having an error. I'm sure I am skipping some basic concept... sorry.

here is the problem.

I use on my html this code:

<div>
<script type='text/javascript'>
var myCanvas = document.getElementsByTagName("canvas");
document.write('<img src="'+myCanvas[0].toDataURL("image/png")+'"/>');

</script></div>

I have only one canvas on my document. The error I see in chrome is:

Uncaught TypeError: Cannot read property '0' of undefined sankey.html:128 (anonymous function)

If I enter

document.write('<img src="'+myCanvas[0].toDataURL("image/png")+'"/>');

(the exact same line) in the java script chrome console, it works! How is this possible?

• javascript

Share Improve this question Follow edited Nov 29, 2012 at 11:08 Alexis Pigeon 7,5181111 gold badges4141 silver badges4646 bronze badges asked Nov 29, 2012 at 10:50 otmezgerotmezger 10.8k2121 gold badges6868 silver badges9292 bronze badges 1

• Without seeing more code one possible reason could be that your javascript is placed before your canvas element in your html file. This would cause your script to run before your canvas element exists. Afterwards when you use the console, it does exist and your code would work. – Willem Commented Nov 29, 2012 at 11:10

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You forgot the [0]:

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

getElementsByTagName returns a array of elements, you'll have to select one out of it. (Even if the array only contains 1 element)

A "cleaner" way to do this would be to set a id (id="myCanvas") on the canvas, and use getElementById, but since you're only using 1 canvas, getElementsByTagName will work.

The reason it was returning undefined is probably that your code was executed before the canvas was loaded.
Wrap your code in a function, then register the function to the "load" event

<script type='text/javascript'>
    var myCanvas;

    function initCanvas(){
        myCanvas = document.getElementsByTagName("canvas");
        document.write('<img src="'+myCanvas[0].toDataURL("image/png")+'"/>');
    }

    window.addEventListener('load', initCanvas, false);
</script>