Created this drawing app with JS / canvas. JSHint is throwing errors but the app works just fine. Need help with code clean up / refactoring as I'm fairly new to JavaScript.

JSHint in Atom is fine but using codekit to compile and minify the JSHint freaks out - 31 errors:

> changeColor is defined but never used (and many other functions)
> 
> Also, webkitURL is not defined (and many others)


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.lineWidth = 5;
    var down = false;
    var xPos;
    var yPos;

    function draw(e) {
        xPos = e.clientX - canvas.offsetLeft;
        yPos = e.clientY - canvas.offsetTop;

        if (down === true) {
            context.lineTo(xPos, yPos);
            context.stroke();
        }
    }

    canvas.addEventListener('mousemove', draw);

    canvas.addEventListener('mousedown', function() {
        down = true;
        context.beginPath();
        context.moveTo(xPos, yPos);
        canvas.addEventListener("mousemove", draw);
    });

    canvas.addEventListener('mouseup', function() {
        down = false;
    });

    function changeColor(color) {
        context.strokeStyle = color;
        context.fillStyle = color;
    }

    function clearCanvas() {
        context.clearRect(0, 0, canvas.width, canvas.height);
    }

    function changeBrushSize(size) {
        context.lineWidth = size;
    }

    function fillCanvas() {
        context.fillRect(0, 0, canvas.width, canvas.height);
    }

    function changeBrushStyle(brushStyle) {
        context.lineCap = brushStyle;
    }

    function triggerClick() {
        document.getElementById('file').click();
    }

    document.getElementById('file').addEventListener('change', function(e) {
        clearCanvas();
        var URL = URL || webkitURL;
        var temp = URL.createObjectURL(e.target.files[0]);
        var image = new Image();
        image.src = temp;

        image.addEventListener('load', function() {
            imageWidth = image.naturalWidth;
            imageHeight = image.naturalHeight;
            newImageWidth = imageWidth;
            newImageHeight = imageHeight;
            originalImageRatio = imageWidth / imageHeight;

            if (newImageWidth > newImageHeight && newImageWidth > 800) {
                newImageWidth = 800;
                newImageHeight = 800 / originalImageRatio;
            }

            if ((newImageWidth >= newImageHeight || newImageWidth > newImageWidth) && newImageHeight > 500) {
                newImageHeight = 500;
                newImageWidth = 500 * originalImageRatio;
            }

            context.drawImage(image, 0, 0, newImageWidth, newImageHeight);
            URL.revokeObjectURL(temp);
        });
    });


<!-- language: lang-css -->

    *, *:before, *:after {
      box-sizing: border-box; }

    html {
      -ms-text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%; }

    body {
      margin: 0;
      font: 16px/1 sans-serif;
      font-family: 'Questrial', sans-serif;
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased; }

    h1,
    h2,
    h3,
    h4,
    p,
    blockquote,
    figure,
    ol,
    ul {
      margin: 0;
      padding: 0; }

    main,
    li {
      display: block; }

    h1,
    h2,
    h3,
    h4 {
      font-size: inherit; }

    strong {
      font-weight: bold; }

    a,
    button {
      color: inherit;
      transition: .3s; }

    a {
      text-decoration: none; }

    button {
      overflow: visible;
      border: 0;
      font: inherit;
      -webkit-font-smoothing: inherit;
      letter-spacing: inherit;
      background: none;
      cursor: pointer; }

    ::-moz-focus-inner {
      padding: 0;
      border: 0; }

    :focus {
      outline: 0; }

    img {
      max-width: 100%;
      height: auto;
      border: 0; }

    section {
      padding-top: 20px;
      padding-bottom: 20px;
      margin: 20px auto; }
      section #canvas {
        display: block;
        border: 1px solid black;
        margin: 10px auto 0px; }
      section #drawingTools {
        width: 800px;
        height: 135px;
        margin: 0 auto; }
        section #drawingTools #colors {
          width: 100%;
          height: 20px; }
          section #drawingTools #colors button {
            width: 20%;
            height: 20px;
            float: left;
            border: 1px solid #7b1a86; }
            section #drawingTools #colors button:hover {
              opacity: 0.5; }
          section #drawingTools #colors #black {
            background: black; }
          section #drawingTools #colors #white {
            background: white; }
          section #drawingTools #colors #red {
            background: red; }
          section #drawingTools #colors #green {
            background: green; }
          section #drawingTools #colors #blue {
            background: blue; }
        section #drawingTools #otherTools {
          width: 100%;
          height: 115px; }
          section #drawingTools #otherTools button {
            width: 20%;
            height: 50px;
            margin-top: 5px;
            border: 1px solid white;
            background: #303030;
            color: white;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 3px;
            cursor: pointer;
            float: left;
            border: 1px solid #7b1a86; }
            section #drawingTools #otherTools button:hover {
              opacity: 0.6; }
      section #file {
        visibility: hidden; }


<!-- language: lang-html -->

    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="assets/css/main.css">
      </head>
      <body>

        <section>
            <div id="drawingTools">
                <div id="colors">
                    <button id="black" onclick="changeColor('black')"></button>
                    <button id="white" onclick="changeColor('white')"></button>
                    <button id="red" onclick="changeColor('red')"></button>
                    <button id="green" onclick="changeColor('green')"></button>
                    <button id="blue" onclick="changeColor('blue')"></button>
                </div>
                <div id="otherTools">
                    <button id="clearCanvas" onclick="clearCanvas()">Clear canvas</button>
                    <button id="brushSize1" onclick="changeBrushSize(5)">brush size 1</button>
                    <button id="brushSize2" onclick="changeBrushSize(20)">brush size 2</button>
                    <button id="brushSize3" onclick="changeBrushSize(30)">brush size 3</button>
                    <button id="brushSize4" onclick="changeBrushSize(40)">brush size 4</button><br>
                    <button id="fillCanvas" onclick="fillCanvas()">Fill canvas</button>
                    <button id="defaultBrush" onclick="changeBrushStyle('butt')">default brush</button>
                    <button id="squareBrush" onclick="changeBrushStyle('square')">square brush</button>
                    <button id="roundBrush" onclick="changeBrushStyle('round')">round brush</button>
                    <button id="openFile" onclick="triggerClick()">open img</button>
                </div>
            </div>
            <canvas id="canvas" width = "800px" height="500px;"></canvas>
            <input type="file" id="file" accept="image/*" />
        </section>

        <script src="assets/js/min/main-min.js"></script>
      </body>
    </html>


<!-- end snippet -->