Why is my drawP and drawQ functions not working

geekmonster · 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!!!

dsonesuk · 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.

Ingolme · 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.

geekmonster · May 15, 2016

Thanks guys

@Foxy and @never scared

geekmonster · 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?

dsonesuk · 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?

Sign In

Why is my drawP and drawQ functions not working

Recommended Posts

geekmonster

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

geekmonster

Link to comment

Share on other sites

geekmonster

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity