HTML Canvas Drawing

by the_voder

HTML

<div id="tools_option">
  <div id="logo">
    <h1><a>Paint</a></h1>
  </div>
  <div id="options">
  	<div id="type_of_option">
	  <b>Brush</b>
	</div>
    <div class="option_name">
      <span>WIDTH</span>
    </div>
    <div class="option">
      <input id="size_range" type="range" min="1" max="250" value="10"/>
	  <input id="size_text" type="text" value="10"/>
    </div>
    <div class="option_name">
      <span>BRISTLES</span>
    </div>
    <div class="option">
	  <input id="bristles_range" type="range" min="1" max="100" value="10"/>
	  <input id="bristles_text" type="text" value="10"/>
    </div>
  </div>
</div>

<canvas id="canvas"></canvas>

<div id="alltools">
  <div class="tools" id="brushes">
    <div>BRUSHES</div>
    <input id="normal" class="brush" type="radio" name="brush" checked/>
    <input id="weird" class="brush" type="radio" name="brush"/>
    <input id="dotted" class="brush" type="radio" name="brush"/>
  </div>
  
  <div class="tools" id="colors">
    <div>COLORS</div>
    <input type="radio" style="background:black" name="colors"/>
    <input type="radio" style="background:rgb(200, 50, 50)"name="colors"/>
    <input type="radio" style="background:#222" name="colors"/>
    <input type="radio" style="background:rgb(50, 200, 50)" name="colors"/>
    <input type="radio" style="background:#666" name="colors"/>
    <input type="radio" style="background:rgb(50, 50, 200)" name="colors"/>
    <input type="radio" style="background:#AAA" name="colors"/>
    <input type="radio" style="background:rgb(200, 200, 50)" name="colors"/>
    <input type="radio" style="background:white" name="colors"/>
    <input type="radio" style="background:rgb(200, 50, 200)" name="colors"/>
  </div>
</div>
<button id="button_clear">Clear canvas</button>

CSS

body {
  margin: 0 auto;
  background: #222;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#canvas {
  background-image: -webkit-linear-gradient(-135deg, white, #EEE);
  background-image: -moz-linear-gradient(-135deg, white, #EEE);
  background-image: -o-linear-gradient(-135deg, white, #EEE);
  background-image: linear-gradient(-135deg, white, #EEE);
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 75px rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -250px;
  margin-left: -400px;
}

#button_clear {
  background: black;
  position: fixed;
  bottom: 0;
  display: block;
  margin: 0 auto;
  width: 100%;
  color: white;
  border: none;
}

#alltools {
  position: absolute;
  top: 65px;
}

#tools_option {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0 auto;
  width: 100%;
  height: 35px;
  background: #111;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  z-index: 50;
}

#tools_option .option_name {
  display: inline-block;
  margin: 10px 10px;
  font-family: arial;
  color: #ccc;
}

#tools_option .option {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 100px;
  height: 35px;
}

#tools_option input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none;
  background: #222;
  margin: 0 auto;
  margin-top: 9px;
  width: 100px;
}

#tools_option input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none;
  background-color: #888;
  opacity: 0.5;
  width: 10px;
  height: 20px;
}

#tools_option .option:hover > input[type="text"] {
  display: block;
}

#tools_option input[type="text"] {
  position: absolute;
  width: 90px;
  background: #111;
  color: #aaa;
  text-align: center;
  padding: 5px;
  margin-top: 1px;
  margin-left: -1px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-top: none;
  display: none;
}

#logo...

JavaScript

// Defining variables
var first = 1,
    canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"),
    isMouseDown = false, 
    allInputs = document.querySelectorAll("input[type='text']");

// Canvas size
canvas.width = 800;
canvas.height = 500;

// Events in canvas
canvas.addEventListener("mousedown", drawTrue, false);
canvas.addEventListener("click", function(){return false;}, false);
canvas.addEventListener("mouseup", drawFalse, false);
canvas.addEventListener("mouseout", drawFalse, false);
canvas.addEventListener("mousemove", draw, false);

// Change input value
// If key up or key right >> input value +1
// If key down or key left >> input value -1
for(i = 0; i < allInputs.length; i++) {
  allInputs[i].addEventListener("keydown", function(ev){
    ev = ev || window.event;
    // Check if value is number
      if(!isNaN(this.value)){
      // Read keyCode from event and when it's arrow up or right, value will increment
      if(ev.keyCode == "38" || ev.keyCode == "39"){
        ++this.value;
      }
      // If event keyCode will be from arrow down or left, value will decrement
      else if(ev.keyCode == "40" || ev.keyCode == "37"){
        // Check if value isn't zero. If is value stay same.
        if(this.value !== 0){
          --this.value;
        }
      }
    }
    // If value isn't number
    else {
      return false;
    }
  }, false);
}

// Declaring more event listeners
document.getElementById("button_clear").addEventListener("click", clear, false);
document.getElementById("size_range").addEventListener("change", sizeSelectRange, false);
document.getElementById("size_text").addEventListener("keyup", sizeSelectText, false);
document.getElementById("bristles_range").addEventListener("change", bristlesSelectRange, false);
document.getElementById("bristles_text").addEventListener("keyup", bristlesSelectText, false);


// Function that select brush size
function sizeSelectRange() {
  document.getElementById("size_text").value =...