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>