Jump to content

Why is my drawP and drawQ functions not working


geekmonster
 Share

Recommended Posts

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...