I'm trying to draw a line in Canvas when a user gives the X and Y coordinates. This is what I have so far. I can get the canvas and the input boxes it won't draw though. I'm a newbie so any advice is appreciated.
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x1 = document.getElementById("x1").value;
var x2 = document.getElementById("x2").value;
var y1 = document.getElementById("y1").value;
var y2 = document.getElementById("y2").value;
function draw(){
context.beginPath();
context.moveTo(x1.value,y1.value);
context.lineTo(x2.value,y2.value);
context.stroke();
}
</script>
<br><br>
<h1>Draw a Line</h1>
X-coordinate 1 <input type="text" id="start_x"><br><br>
Y-coordinate 1<input type="text" id="start_y"><br><br>
X-coordinate 2<input type="text" id="end_x"><br><br>
Y-coordinate 2<input type="text" id="end_y"><br><br>
<input type="button" value="draw" onclick="draw()">
It's giving you undefined because you set your input id as start_x, start_y,end_x,end_y and in your js you are getting the value as x1,x2,y1,y2.
html
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;">
</canvas>
<h1>Draw a Line</h1>
<form>
X-coordinate 1 <input type="text" id="start_x"><br><br>
Y-coordinate 1<input type="text" id="start_y"><br><br>
X-coordinate 2<input type="text" id="end_x"><br><br>
Y-coordinate 2<input type="text" id="end_y"><br><br>
<input type="button" value="draw" onclick="draw()">
</form>
js
function draw(){
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x1 = document.getElementById("start_x").value;
var x2 = document.getElementById("start_y").value;
var y1 = document.getElementById("end_x").value;
var y2 = document.getElementById("end_y").value;
context.beginPath();
context.moveTo(x1,x2);
context.lineTo(y1,y2);
context.stroke();
}
Rewrite your code this way;
<canvas width="300" height="300" id="myCanvas"></canvas><br /><br />
X-coordinate 1<input type="text" id="x1"><br><br>
Y-coordinate 1<input type="text" id="y1"><br><br>
X-coordinate 2<input type="text" id="x2"><br><br>
Y-coordinate 2<input type="text" id="y2"><br><br>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function draw(){
var x1 = document.getElementById("x1").value;
var x2 = document.getElementById("x2").value;
var y1 = document.getElementById("y1").value;
var y2 = document.getElementById("y2").value;
context.beginPath();
context.strokeStyle="#FF0000";
context.moveTo(x1,y1);
context.lineTo(x2,y2);
context.stroke();
}
</script>
<br><br>
<h1>Draw a Line</h1>
<input type="button" value="draw" onclick="draw()">
your draw function is called onclick but the function uses the input value which was set as 'undefined' because when window loaded the value of the input was not defined, to resolve this you should include your code of getting those values in the draw function.
Related
I'm making a new game, I want the amount of circles in the game to be inputed by the player, but am having difficulty setting up the variable from HTML into javascript.
I have determined that the problem only relies on the 'i' variable not being set correctly, since replacing 'document.getElementsByName('circles').value;' with any number works fine.
<div>
<form>
<input type="number" Name="circles" id = "circles" min="2" max="50"
value="2">
<input type="submit">
</form>
</div>
<div id="container">
<canvas id="myCanvas" width="800" height="800">
</canvas>
</div>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i = document.getElementsByName('circles').value;
for (i; i > 0; i= i-1) {
ctx.beginPath();
ctx.arc(Math.random()*c.width+1, Math.random()*c.height+1, 25, 0, 2 *
Math.PI);
ctx.stroke();
}
</script>
I expect the number of appearing circles to be the same as the given value, but instead nothing happens.
Get value by id not using names and make input type as button not submit.
function a(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i = document.getElementById('circles').value;
console.log(i)
for (i; i > 0; i= i-1) {
ctx.beginPath();
ctx.arc(Math.random()*c.width+1, Math.random()*c.height+1, 25, 0, 2 *
Math.PI);
ctx.stroke();
}}
<div>
<form>
<input type="number" Name="circles" id = "circles" min="2" max="50"/>
<input type="button" onclick='a()' value="Click"/>
</form>
</div>
<div id="container">
<canvas id="myCanvas" width="800" height="800">
</canvas>
</div>
I'm trying to change my font size and color in my canvas on a photo. So you have to upload a photo before you're able to add text to the image. After you add the photo and add text, then you're able to change the color and font, but when trying to do so you have to re-submit or the changes are not applied. Any ideas on what is happening? Do I have to re-draw it when they change colors or font sizes? Thanks In advance.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input id="theText" type="text">
<button id="submit">Draw text on canvas</button>
<br>
<canvas id="canvas" width="1000" height="500" class="playable-canvas"></canvas>
<div id="image_div">
<h1> Choose an Image to Upload </h1>
<input type='file' name='img' id='uploadimage' />
</div>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.filter = 'blur(0px)';
</textarea>
<!-- Change Font Size -->
<div class="radio">
<input type="radio" name="radio" id="size16" onclick="size16()" checked="">
<label for="size16"> Font Size 16 </label>
</div>
<div class="radio">
<input type="radio" name="radio" id="size20" onclick="size20()" >
<label for="size20"> Font Size 20 </label>
</div>
<div class="radio">
<input type="radio" name="radio" id="size25" onclick="size25()" >
<label for="size25"> Font Size 25 </label>
</div>
<div class="radio">
<input type="radio" name="radio"id="size30" onclick="size30()" >
<label for="size30"> Font Size 30</label>
</div>
<div class="radio">
<input type="radio" name="radio" id="size35" onclick="size35()" >
<label for="size35"> Font Size 35 </label>
</div>
<div class="radio">
<input type="radio" name="radio" id="size40" onclick="size40()" >
<label for="size40"> Font Size 40 </label>
</div>
<div class="radio">
<input type="radio" name="radio" id="size45" onclick="siz45()" >
<label for="size45"> Font Size 45 </label>
</div>
<div class="radio">
<input type="radio" name="radio" id="size50" onclick="size50()" >
<label for="size50"> Font Size 50 </label>
</div>
<Br>
<!-- Change Color on Text -->
<div class="col-lg-2 col-md-2 col-xs-12">
<div class="radio">
<input type="radio" name="radio" id="black" onclick="BlackText()" checked="">
<label for="radio1"> Black </label>
</div>
<div class="radio">
<input type="radio" name="radio" id="white" onclick="WhiteText()" >
<label for="radio1"> White </label>
</div>
<div class="radio">
<input type="radio" name="radio" id="yellow" onclick="YellowText()" >
<label for="radio1"> Yellow </label>
</div>
<div class="radio radio-primary">
<input type="radio" name="radio" id="blue" onclick="BlueText()" >
<label for="radio3"> Blue </label>
</div>
<div class="radio radio-success">
<input type="radio" name="radio" id="green" onclick="GreenText()" >
<label for="radio4"> Green </label>
</div>
<div class="radio radio-danger">
<input type="radio" name="radio"id="red" onclick="RedText()" >
<label for="radio6"> Red </label>
</div>
<div class="radio radio-warning">
<input type="radio" name="radio" id="orange" onclick="OrangeText()" >
<label for="radio7"> Orange </label>
</div>
<div class="radio radio-purple">
<input type="radio" name="radio"id="purple" onclick="PurpleText()" >
<label for="radio8"> Purple </label>
</div>
</div>
Javscript:
//===========================================================================================================================
// Javascript that loads Image into canvas
//===========================================================================================================================
var drawnImage;
function drawImage(ev) {
console.log(ev);
var ctx = document.getElementById('canvas').getContext('2d'),
img = new Image(),
f = document.getElementById("uploadimage").files[0],
url = window.URL || window.webkitURL,
src = url.createObjectURL(f);
img.src = src;
img.onload = function() {
drawnImage = img;
ctx.drawImage(img, 0, 0);
url.revokeObjectURL(src);
}
}
document.getElementById("uploadimage").addEventListener("change", drawImage, false);
//===========================================================================================================================
// Javascript for input in textbox
//===========================================================================================================================
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var edit = document.getElementById('edit');
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
drawImage();
}
reset.addEventListener('click', function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener('click', function() {
textarea.focus();
})
textarea.addEventListener('input', drawCanvas);
window.addEventListener('load', drawCanvas);
//===========================================================================================================================
// Javascript for Moving Text around.
//===========================================================================================================================
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();
var startX;
var startY;
var texts = [];
var selectedText = -1;
function draw() {
ctx.rect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < texts.length; i++) {
var text = texts[i];
// ctx.fillStyle = "blue";
ctx.fillText(text.text, text.x, text.y);
}
}
function redraw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(drawnImage, 0, 0);
draw();
}
function textHittest(x, y, textIndex) {
var text = texts[textIndex];
return (x >= text.x && x <= text.x + text.width && y >= text.y - text.height && y <= text.y);
}
function handleMouseDown(e) {
e.preventDefault();
startX = parseInt(e.clientX - offsetX);
startY = parseInt(e.clientY - offsetY);
for (var i = 0; i < texts.length; i++) {
if (textHittest(startX, startY, i)) {
selectedText = i;
}
}
}
function handleMouseUp(e) {
e.preventDefault();
selectedText = -1;
}
function handleMouseOut(e) {
e.preventDefault();
selectedText = -1;
}
function handleMouseMove(e) {
if (selectedText < 0) {
return;
}
e.preventDefault();
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
var dx = mouseX - startX;
var dy = mouseY - startY;
startX = mouseX;
startY = mouseY;
var text = texts[selectedText];
text.x += dx;
text.y += dy;
redraw();
}
$("#canvas").mousedown(function(e) {
handleMouseDown(e);
});
$("#canvas").mousemove(function(e) {
handleMouseMove(e);
});
$("#canvas").mouseup(function(e) {
handleMouseUp(e);
});
$("#canvas").mouseout(function(e) {
handleMouseOut(e);
});
$("#submit").click(function() {
var y = texts.length * 20 + 20;
var text = {
text: $("#theText").val(),
x: 20,
y: y
};
// ctx.font = "16px verdana";
text.width = ctx.measureText(text.text).width;
text.height = 16;
texts.push(text);
draw();
});
//===========================================================================================================================
// Javascript for Text Size :)
//===========================================================================================================================
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function size16 () {
ctx.font = "16px verdana";
}
function size20 () {
ctx.font = "20px verdana";
}
function size25 () {
ctx.font = "25px verdana";
}
function size30 () {
ctx.font = "30px verdana";
}
function size35 () {
ctx.font = "35px verdana";
}
function size40 () {
ctx.font = "40px verdana";
}
function size45 () {
ctx.font = "45px verdana";
}
function size50 () {
ctx.font = "50px verdana";
}
//===========================================================================================================================
// Javascript for Drop down for Text Color :)
//===========================================================================================================================
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function PurpleText () {
ctx.fillStyle= 'purple';
}
function BlackText () {
ctx.fillStyle= 'black';
}
function YellowText () {
ctx.fillStyle= 'yellow';
}
function OrangeText () {
ctx.fillStyle = "orange";
}
function BlueText () {
ctx.fillStyle= 'blue';
}
function WhiteText () {
ctx.fillStyle = "white";
}
function GreenText () {
ctx.fillStyle= 'green';
}
function RedText () {
ctx.fillStyle = "red";
}
You have either to draw again the canvans or draw (refresh) it continuosly every xxx milliseconds.
While working on the html code which contains some javascript code as well, i saw that the programm works but gives the results needed fast and then erases them in one single moment (I think that the problem is not rooted in the javascript code). What I need is to pause those results on screen, not erase them. Here is the code:
<html>
<head>
<title>Geometric operations</title>
<script>
function Calculate(){
var radius=document.forms["form1"]["radius"].value;
if (radius==null || radius=="" || isNaN(radius)){
alert("Please give the radius of the circle");
return false;
}
var radius = parseInt(document.getElementById("radius").value,5);
var perimeter = (2 * radius * Math.PI);
var embadon = (radius * radius * Math.PI);
document.getElementById("perimeter").value = perimeter;
document.getElementById("embadon").value = embadon;
}
</script>
</head>
<body>
<h1>Calculation of circle perimeter and circle area</h1>
To calculate the circle perimeter and circle area you need to give the radius and then press the button<b>"Calculation"</b><br>
<form name="form1" action="" method="" onSubmit="return Calculate()">
<pre>
Circle radius : <input type="text" id="radius" size=5> m<br>
Circle perimeter : <input type="text" id='perimeter' size=5> m <br>
Circle area : <input type="text" id='embadon' size=5> m^2<br>
<input type="submit" name="submit" value="Calculation" onclick="Calculate()">
</pre></form>
</body>
</html>
Thanks in advance for any help or insight as to why this happens.
You run to send the form and execution of the function. The function is sent and the page is refreshed. Change the type of button type="submit" to type="button" and add return false;in the function.
<html>
<head>
<title>Geometric operations</title>
<script>
function Calculate(){
var radius=document.forms["form1"]["radius"].value;
if (radius==null || radius=="" || isNaN(radius)){
alert("Please give the radius of the circle");
return false;
}
var radius = parseInt(document.getElementById("radius").value,5);
var perimeter = (2 * radius * Math.PI);
var embadon = (radius * radius * Math.PI);
document.getElementById("perimeter").value = perimeter;
document.getElementById("embadon").value = embadon;
return false;
}
</script>
</head>
<body>
<h1>Calculation of circle perimeter and circle area</h1>
To calculate the circle perimeter and circle area you need to give the radius and then press the button<b>"Calculation"</b><br>
<form name="form1" action="" method="" onSubmit="return Calculate()">
<pre>
Circle radius : <input type="text" id="radius" size=5> m<br>
Circle perimeter : <input type="text" id='perimeter' size=5> m <br>
Circle area : <input type="text" id='embadon' size=5> m^2<br>
<input type="button" name="submit" value="Calculation" onclick="Calculate()">
</pre></form>
</body>
</html>
Here it is:
<html>
<head>
<title>Geometric operations</title>
<script>
function Calculate(){
var radius=document.forms["form1"]["radius"].value;
if (radius==null || radius=="" || isNaN(radius)){
alert("Please give the radius of the circle");
return false;
}
var num=2;
var PI=3.14159;
var radius=document.forms["form1"]["radius"].value;
var perimeter = ((num) * (radius) * (PI));
var embadon = ((radius) * (radius) * (PI));
document.getElementById("perimeter").value = perimeter;
document.getElementById("embadon").value = embadon;
return false;
}
</script>
</head>
<body>
<h1>Calculation of circle perimeter and circle area</h1>
To calculate the circle perimeter and circle area you need to give the
radius and then press the button<b>"Calculation"</b><br>
<form name="form1" action="" method="" onSubmit="return Calculate()">
<pre>
Circle radius : <input type="text" id="radius" size=5> m<br>
Circle perimeter : <input type="text" id='perimeter' size=5> m <br>
Circle area : <input type="text" id='embadon' size=5> m^2<br>
<input type="button" name="SUBMIT" value="Calculation"onclick="Calculate()">
</pre></form>
</body>
</html>
For this project, we're working with canvas. I need to create some buttons, and when you click on the buttons, the corresponding function should be called. These functions will then draw something in the canvas. However, my code isn't working. The buttons and the canvas themselves appear, but nothing draws when you click on the buttons. Are there any errors?
<script>
function drawCircle(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
}
function drawLine(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
}
function drawRectangle(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
}
function drawImage(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
}
function drawText(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
}
</script>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
<input type="button" onclick="drawCircle();" value="Draw Circle">
<input type="button" onclick="drawLine();" value="Draw Line">
<input type="button" onclick="drawRectangle();" value="Draw Rectangle">
<input type="button" onclick="drawImage();" value="Draw Line">
<input type="button" onclick="drawText();" value="Text">
<input type="button" onclick="drawGradient();" value="Gradient">
<input type="button" onclick="scale();" value="Scale">
</body>
</html>
I tried your code in CodePen and the buttons for which you've implemented the function work just fine. Does your console show any errors?
my question today is to ask why when I switch radio buttons, drawing a circle and drawing a square don't work. This is for my paint program im creating. Please help me with this question. Also can you help why the program is so laggy? XD. The code is down here:
var square = true
function myFunction() {
var x = document.getElementById("myColor").value;
ctx.fillStyle = x;
};
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var size = 5
var eraserSize = 5;
$('#colorForm input').on('change', function() {
ctx.fillStyle = $(this).val();
});
$('#sizeForm input').on('change', function() {
size = $(this).val();
});
function drawRect(event) {
var posX = event.pageX - $("#canvas").offset().left - 4
var posY = event.pageY - $("#canvas").offset().top - 4
ctx.fillRect(posX, posY, size, size)
}
function drawCircle(event) {
var posX = event.pageX - $("#canvas").offset().left
var posY = event.pageY - $("#canvas").offset().top
ctx.beginPath();
ctx.arc(posX, posY, size - 1, 0, Math.PI / 2, false);
ctx.closePath();
ctx.fill();
}
function check() {
if (square === true) {
$("html").mousedown(function() {
$("html").mousemove(function(event) {
drawRect(event);
})
$("html").click(function(event) {
drawRect(event);
})
})
$("html").mouseup(function() {
$("html").off("mousemove")
})
}
if (square === false) {
$("html").mousedown(function() {
$("html").mousemove(function(event) {
drawCircle(event);
})
$("html").click(function(event) {
drawCircle(event);
})
})
$("html").mouseup(function() {
$("html").off("mousemove")
})
}
}
function clearCanvas() {
if (confirm("Are you sure you want to clear your drawing?") == true) {
ctx.clearRect(0, 0, 800, 800)
}
}
setInterval(function() {
check();
}, 1)
#canvas {
border: 1px solid black
}
<p id="demo"></p>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<canvas id="canvas" width="800" height="800" style="cursor:crosshair"></canvas>
<br />
<STRONG>Choose your drawing shape</STRONG>:
<input type="radio" name="shape" onclick="square = true" checked="checked">Square
<input type="radio" name="shape" onclick="square = false">Circle
<br />
<STRONG>Color Settings</STRONG>:
<input type="color" id="myColor">
<button onclick="myFunction()">OK</button>
<br />Basic Colours:
<br />
<form id="colorForm">
<input type="radio" name="color" value="black" checked="checked">Black
<input type="radio" name="color" value="red">Red
<input type="radio" name="color" value="orange">Orange
<input type="radio" name="color" value="yellow">Yellow
<input type="radio" name="color" value="green">Green
<input type="radio" name="color" value="blue">Blue
<input type="radio" name="color" value="purple">Purple
<input type="radio" name="color" value="white">Eraser (White)
</form>
<form id="sizeForm">
<br />
<STRONG>Size</STRONG>:
<input type="radio" name="size" value="10">Big
<input type="radio" name="size" value="5" checked="checked">Normal
<input type="radio" name="size" value="2">Small
</form>
<br />
<button onclick="clearCanvas()">Clear Drawing</button>
.arc() takes radians - 2π is a full circle, you are doing π/2 which is 90 degrees. Here's an easy converter: http://www.rapidtables.com/convert/number/radians-to-degrees.htm.
I adjusted your code below, you were not cleaning up the onmousedown listener. The click listener is actually unnecessary, if a mouseup is used instead (since you're already mousedown, you have half of the click already). The setInterval was unnecessary; you can listen for mousedown to start drawing. Limiting the scope of the listeners to the canvas vs. all of the HTML can improve performance also.
var square = true; // Set
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var size = 5
var eraserSize = 5;
$('#colorForm input, #myColor').on('change', function() {
ctx.fillStyle = $(this).val();
});
$('#sizeForm input').on('change', function() {
size = $(this).val();
});
function drawRect(event) {
var posX = event.pageX - $(canvas).offset().left - 4
var posY = event.pageY - $(canvas).offset().top - 4
ctx.fillRect(posX, posY, size, size)
}
function drawCircle(event) {
var posX = event.pageX - $(canvas).offset().left
var posY = event.pageY - $(canvas).offset().top
ctx.beginPath();
ctx.arc(posX, posY, size - 1, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
}
function mouseDown(e) {
// We only care about mousemove on the canvas, not the whole page
if (square) {
$(canvas).on('mousemove', drawRect).on('mouseup', drawRect);
} else {
$(canvas).on('mousemove', drawCircle).on('mouseup', drawCircle);
}
// If the user mouseup outside of the canvas, we don't want to keep listening, so listen for mouseup on the whole page to remove our other drawing listeners
$('html').one('mouseup', function() { // "one" means that it will only fire once and will stop listening after that (cleanup for free)
$(canvas).off('mousemove').off('mouseup');
});
}
function clearCanvas() {
if (confirm("Are you sure you want to clear your drawing?") == true) {
ctx.clearRect(0, 0, 800, 800)
}
}
// We only care about mousedown on the canvas, not the whole page
$(canvas).on('mousedown', mouseDown);
#canvas {
border: 1px solid black;
cursor: crosshair;
}
h2,
h3 {
margin-bottom: 0;
}
h2 {
font-size: 1.1rem;
}
h3 {
font-size: 1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="300" height="200"></canvas>
<h2>Choose your drawing shape:</h2>
<p>
<input type="radio" name="shape" onclick="square=true;" checked="checked">Square
<input type="radio" name="shape" onclick="square=false;">Circle
</p>
<h2>Color Settings:</h2>
<input type="color" id="myColor" />
<form id="colorForm">
<h3>Basic Colours:</h3>
<p>
<input type="radio" name="color" value="black" checked="checked" />Black
<input type="radio" name="color" value="red" />Red
<input type="radio" name="color" value="orange" />Orange
<input type="radio" name="color" value="yellow" />Yellow
<input type="radio" name="color" value="green" />Green
<input type="radio" name="color" value="blue" />Blue
<input type="radio" name="color" value="purple" />Purple
<input type="radio" name="color" value="white" />Eraser (White)
</p>
</form>
<form id="sizeForm">
<h2>Size:</h2>
<p>
<input type="radio" name="size" value="10" />Big
<input type="radio" name="size" value="5" checked="checked" />Normal
<input type="radio" name="size" value="2" />Small
</p>
</form>
<br />
<button onclick="clearCanvas()">Clear Drawing</button>
First of all, your code is missing a ton of semi-colons at the end of lines, which is VERY bad practice in general. I'd say your first line of action is to fill those in to make sure missing semi-colons is causing the issue.
Second, when you are changing the square variable, it is first assigning the onmousedown handler to use the drawRect method. However, when you select circle and square becomes false, you are then assigning the onmousedown handler to use the drawCircle method without unbinding the previous onmousedown handler. With jQuery, assigning a handler again does not overwrite the previous handler.
Another issue I see with this is that the circle is not being drawn correctly in the first place. If you set square=false initially and try to draw a circle, it is only drawing a semi-circle, so check your drawCircle.