drawing shapes on canvas using input and label

by heldersepu

HTML

<canvas id='cv0' width=400 height=300></canvas>
<div id="controls">
    <p><label>Fill: <input id="fillBox" type="checkbox" checked="checked"></label></p>

    <div class="lightBorder">
        <p><input type="radio" name="shape" value="line" checked="checked">Line</p>
        <p><input type="radio" name="shape" value="circle">Circle</p>
        <p><input type="radio" name="shape" value="polygon">Polygon</p>
    </div>
<p><label>Line With: <input id="lineWidth" type="range" step="1" min="3" max="20"></label></p>
    <p><label>Polygon Sides: <input id="polygonSides" type="range" step="1" min="3" max="10"></label></p>
        <p><label>Polygon Angle: <input id="polygonAngle" type="range" step="22.5" min="0" max="90"></label></p>
         <p><label>Fill Color: <input id="fillColor" type="color" value='#c84341'></label></p>
         <p><label>Stroke Color: <input id="strokeColor" type="color" value='#624c6c'></label></p>

</div>

<div id='controls2'>
<p>
LineCap Style:
</p>
<p><input type='radio' value='round' name='linecaps' id='roundshape' checked="checked">Round</p>
<p><input type='radio' value='square' name='linecaps' id='sqhape'>Square</p>
<p><input type='radio' value='butt' name='linecaps' id='buttshape'>Bevel</p>
<label>
Global Composite Control:
</label>

<select id='controls3'>

<option type='radio' name='globalComposite' value='source-over'checked='checked'>source-over
<option type='radio' name='globalComposite' value='source-in'>source-in</option>

<option type='radio' name='globalComposite' value='source-out'>source-out</option>
<option type='radio' name='globalComposite' value='destination-out'>destination-out</option>

<option type='radio' name='globalComposite' value='destination-in'>destination-in</option>
<option type='radio' name='globalComposite' value='destination-over'>destination-over</option>

<option type='radio' name='globalComposite' value='source-atop'>source-atop</option>
<option type='radio' name='globalComposite'...

CSS

#cv0 {
  border: solid gray;
}
#controls {
  margin-top: -17.45rem;
  margin-left: 25rem;
  font-family: Brooklyn, 'sans-sherif';
  font-size: 0.75rem;
}

#controls2  {
  margin-top: -17.45rem;
  margin-left: 40rem;
  font-family: Brooklyn, 'sans-sherif';
  font-size: 0.75rem;
}

#controls3 {
  margin-top: 0.01rem;
  margin-left: 0rem;
background: hsl(42, 63%, 99%);
    color: black;
  font-family: Brooklyn, 'sans-sherif';
  font-size: 0.75rem;
}

JavaScript

var canvas,
    context,
    dragging = false,
    dragStartLocation,
    snapshot;


function getCanvasCoordinates(event) {
    var x = event.clientX - canvas.getBoundingClientRect().left,
        y = event.clientY - canvas.getBoundingClientRect().top;

    return {x: x, y: y};
}

function takeSnapshot() {
    snapshot = context.getImageData(0, 0, canvas.width, canvas.height);
}

function restoreSnapshot() {
    context.putImageData(snapshot, 0, 0);
}

function drawLine(position) {
    context.beginPath();
    context.moveTo(dragStartLocation.x, dragStartLocation.y);
    context.lineTo(position.x, position.y);
    context.stroke();
}

function drawCircle(position) {
    var radius = Math.sqrt(Math.pow((dragStartLocation.x - position.x), 2) + Math.pow((dragStartLocation.y - position.y), 2));
    context.beginPath();
    context.arc(dragStartLocation.x, dragStartLocation.y, radius, 0, 2 * Math.PI, false);
     //context.fillStyle='hsl('+ 360*Math.random() +', 129%, 95%)';
}

function drawPolygon(position, sides, angle) {
      context.beginPath();
  for (var j = 0; j < sides + 2; j++) {
    var a = angle * Math.PI / 180
    var sz = (j % 2 == 0) ? 20 : 10
    var xd = sz * Math.sin(a)
    var yd = sz * Math.cos(a)
    context.lineTo(position.x + xd, position.y + yd);
    angle += 360 / sides
  }
  context.stroke();
}

function draw(position) {
// fillBox is a local variable to the draw function
    var fillBox = document.getElementById("fillBox"),
        shape = document.querySelector('input[type="radio"][name="shape"]:checked').value,
        //this below is what grabs the slider range and passes to the if condition for the shape polygon
        polygonSides = document.getElementById("polygonSides").value,
        polygonAngle = document.getElementById('polygonAngle').value,
         linecaps = document.querySelector('input[type="radio"][name="linecaps"]:checked').value,
         globalComposite =...