geekmonster Posted May 15, 2016 Share Posted May 15, 2016 This code was just working b4 I went to work and when I came back two of my function arent working now. The circle and Ellipse functions render to the canvas but the other 2 won't and I can't figure out why. Here's my code: function drawCircle(){ var canvas = document.getElementById("myCanvas"); var radius = document.getElementById("getRadius").value; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(100, 75, radius, 0, 2 * Math.PI); ctx.stroke(); } function clearArea(){ var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); } function drawEllipse(){ var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI); ctx.stroke(); } function drawP(){ var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.font = "48px serif"; ctx.fillText("P", 50, 50); } function drawQ(){ var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.font = "48px serif"; ctx.fillText("Q", 50, 50); } <!DOCTYPE html> <html> <head> <!-- meta tag goes here --> <title>EG_Editor</title> </head> <body> <h1>EG_Editor</h1><em>SMAP UAH</em> <!-- action - where the form send data to --> <!-- method - what HTTP method (get/post) --> <!-- content goes here --> <form> <label for="getRadius">Expression:</label> <input id="getRadius" type="text" placeholder=" enter expression"/> <input type="button" id="drawC" value="Circle" onclick="drawCircle();"/> <input type="button" id="drawE" value="Ellipse" onclick="drawEllipse();"/> <input type="button" id="drawP" value="P" onclick="drawP();"/> <input type="button" id="drawQ" value="Q" onclick="drawQ();"/> <input type="button" id="clear" value="Clear" onclick="clearArea();"/> <br> <canvas id="myCanvas"></canvas> <script type="text/javascript" src="app.js"></script> </form> </body> </html> I mean it was just working. I wanted to add some css in order to space out the elements on the canvas but now I cant see two of them. PLEASE HELP!!! Link to comment Share on other sites More sharing options...
dsonesuk Posted May 15, 2016 Share Posted May 15, 2016 DO NOT name a function the same as id reference, it get confused thinking you are referring to id, which IS NOT a function. Link to comment Share on other sites More sharing options...
Ingolme Posted May 15, 2016 Share Posted May 15, 2016 The issue is due to a really stupid browser "feature". What's happening is that you've named your function the same as the ID attribute of an element. Due to some old non-standard behaviors, the browser creates a variable for each element with an ID on the page, so drawP actually refers to an element instead of a function. The easiest solution: Remove the ID attribute from your buttons, they're not being used for anything at the moment. Link to comment Share on other sites More sharing options...
geekmonster Posted May 15, 2016 Author Share Posted May 15, 2016 Thanks guys @Foxy and @never scared Link to comment Share on other sites More sharing options...
geekmonster Posted May 15, 2016 Author Share Posted May 15, 2016 One more question, If I wanted to put this in a switch statement where I would only need one button do I need to eliminate the onclick functions in my HTML? Link to comment Share on other sites More sharing options...
dsonesuk Posted May 16, 2016 Share Posted May 16, 2016 You can use unobtrusive javascript to attach onclick event, but regards to single button how are you going to identify which function to run for specific canvas drawing? radio button selection perhaps? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now