alienA2 Posted January 19, 2012 Share Posted January 19, 2012 How to do I add javascript to my Canvas element if I have seperate JS file? I want to add the coding into the JS file and somehow use the function in the canvas code inside my HTML file. Link to comment Share on other sites More sharing options...
thescientist Posted January 19, 2012 Share Posted January 19, 2012 are you asking how to attach events to the canvas element from an external JS file? using JS from an external file is no different from it being inline. The javascript will be "included" into the page as if it were inline. You just have to make sure that if you are using element references, that they are not accessed until after the DOM has loaded, which is as simple as putting all initial "loading" code inside window.onload. Link to comment Share on other sites More sharing options...
alienA2 Posted January 19, 2012 Author Share Posted January 19, 2012 Take a look at this example <!DOCTYPE html><html><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">window.onload=function(){var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var img=new Image();img.src="img_flwr.png";ctx.drawImage(img,0,0);}</script></body></html>--- I am probably not sure which element to probably use... Link to comment Share on other sites More sharing options...
thescientist Posted January 19, 2012 Share Posted January 19, 2012 I'm still not sure what you're asking for. is something not working? are you getting errors? Link to comment Share on other sites More sharing options...
alienA2 Posted January 20, 2012 Author Share Posted January 20, 2012 I am not getting an error, no. I want the script to be inside my JS file. My question is how do I make the Canvas element understand to reference this specific function that I created? Basically I want to remove the script completely out of the HTML file and put it inside the JS file. Then I want the Canvas Syntax to have some reference on the function... eg. <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;" JAVASCRIPT>Your browser does not support the canvas element.</canvas>Note the JAVASCRIPT... Link to comment Share on other sites More sharing options...
Ingolme Posted January 20, 2012 Share Posted January 20, 2012 What's that supposed to be? You can't just put plain Javascript inside a tag. Are you referring to an event like onclick? Link to comment Share on other sites More sharing options...
thescientist Posted January 20, 2012 Share Posted January 20, 2012 have you looked at the JS tutorials? They explain how to use a separate stylesheet. Since you are using window.onload, everything you write inside the function will happen onload (of the page), regardless of if the script is in the page or externally. I'm not sure what you are looking for or expecting to happen. There's nothing to reference unless you need the function to execute under different terms (like onclick of something). Link to comment Share on other sites More sharing options...
ShadowMage Posted January 20, 2012 Share Posted January 20, 2012 Basically I want to remove the script completely out of the HTML file and put it inside the JS file.The code you posted already uses window.onload so you can just move the code to an external file and link that file in your document head. The window.onload makes sure that your code is only run after the DOM has loaded. Then I want the Canvas Syntax to have some reference on the function...The canvas does not reference the JavaScript. In fact, it is the other way around. You get a reference to the canvas from JavaScript. This line:var c=document.getElementById("myCanvas");gets the reference to your canvas. The rest of the code works with this reference. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.