Canvas Script from external file

Question

I have a simple Canvas element in my HTML5 Code and trying to draw in it with a external javascript file.

<script src="script.js" type="text/javascript"></script>
<canvas id="can1" width="50px" height="50px"></canvas>

//script.js:
var can1 = document.getElementById("play");
var can1Context = play.getContext("2d");
can1Context.fillStyle="#FF0000";
can1Context.fillRect(0,0,150,75);

But this is not working, but if the script is in the same file as the Canvas Element, it works. Can somebody explain that to me?

score 1 · Accepted Answer · edited May 23 '17 at 10:34

1

Change it to

<canvas id="play" width="50px" height="50px"></canvas>
<!--        ^^^^ notice the different id -->
<script src="script.js" type="text/javascript"></script>

var can1 = document.getElementById("play");
var can1Context = can1.getContext("2d");
//                ^^^^ use the variable here, not the id!
can1Context.fillStyle="#FF0000";
can1Context.fillRect(0,0,150,75);

See Why does jQuery or a DOM method such as getElementById not find the element? for an explanation.

edited May 23 '17 at 10:34

Community

1
1

answered Apr 02 '13 at 19:04

Bergi

513,640
108
821
1,164

1

the id of his element and the one he tries to select don't even match, we're having bigger troubles than that here I fear... – GNi33 Apr 02 '13 at 19:05
@GNi33: I noticed and fixed it already :-) Anyway, thanks for mentioning! – Bergi Apr 02 '13 at 19:08
Oh, sorry. I changed the IDs for this example. I meant var can1 = document.getElementById("can1"); – coldice4 Apr 02 '13 at 19:10
@user2237411: Of course you can use any combination of variable name and element id, only you should distinguish them :-) – Bergi Apr 02 '13 at 19:12
Thanks for the link that helped a lot :) – coldice4 Apr 02 '13 at 19:16

Canvas Script from external file

1 Answers1