Trouble with javascript: drawing shapes at button click

For the beginning of my assignment, I have a webpage where i have an input box that asks for a number, and a drop down menu with options to select a shape. Below that is an SVG container that will draw that particular shape as many times as indicated in the text input, but the shape should only appear once because I have all iterations being drawn at the same location so they all overlap. But anyways, my problem is that I have everything set up but when I give the input (a number in the text input and a shape in the drop down menu), its just not drawing the shapes. When I choose option 1(circle) it does nothing, when I choose option 2(square) it does draw a square, when I choose option 3(triangle), it draws an super tiny triangle but the size I've specified in my code should make it atleast as big as the square. Here's my code. Where's my mistake?

HTML:

<main>

<h1>Assignment 4 : Zap-em</h1>

<p>Difficulty: <input type="text" id="howmany"/></p>
<p>Shape: <select id="shape">
<option value="a">Circle</option>
<option value="b">Square</option>
<option value="c">Triangle</option>
</select>
</p>
<button id="btn">Start</button>

<div id="svg1"></div>



</main>

Javascript:

var typed, shape;

draw = function() {
    typed = $('#howmany').val()
    shape = $('#shape').val()


    for ( count = 0; count < typed; count = count + 1) {

        if (shape == "a") {
            circle = paper.cicle(100, 100, 25)
        }
        if (shape == "b") {
            square = paper.rect(100, 100, 50, 50)
        }
        else {
            triangle = paper.path('M250,0 L500,500, L0,500 Z')
        }
    }
}    



setup = function() {
  paper = Raphael('svg1', 400, 400)
    $('button').click(draw)
}
jQuery(document).ready(setup)