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)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);    });});*, *: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; }<!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>
Drawing app with JS / canvas
javascript;beginner;html;canvas