Canvas Paint APP *

by Boban Stojanovski

HTML

<div id="content">
  <span id="tools">
     <button id="brush">Brush</button>
     <button id="circle" >Circle</button>
     <button id="line">Line</button>
     <button id="rectangle">Rectangle</button>
     <button id="ellipse">Ellipse</button>   
     <button id="eraser">Eraser</button>
  </span>

  <span id="colors">	
			<button  class="black" id="#000000"> </button>
			<button  class="white" id = '#FFFFFF'> </button>
			<button  class="blue" id = '#0000FF'> </button>
		  <button  class="red" id = '#FF0000'> </button>
			<button  class="yellow" id = '#FFFF00'> </button>
			<button  class="green" id = '#008000'> </button>
			<button  class="purple" id = '#800080'> </button>			
			<input type="hidden" id="color_value_form">				
</span>

  <div id="sketch">
    <canvas id="paint"></canvas>
  </div>


  <div id="functions">
    <canvas id="brush_size" width="50" height="50"></canvas>
    Brush Size <input type="range" id="width_range" value="10"> 
    Opacity <input type="range" id="opacity_range" value="100">
    <button id="undo">Undo</button>
    <button id="redo">Redo</button> 
    <button id="id_download">Download</button>
    <button id="clear">Clear All</button> 
  </div>
</div>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

CSS

#sketch {
  border: 10px solid gray;
  height: 450px;
  position: relative;
}

#tmp_canvas {
  position: absolute;
  left: 0px;
  right: 0;
  bottom: 0;
  top: 0;
  cursor: crosshair;
}

.black,
.white,
.blue,
.green,
.yellow,
.red,
.purple {
  width: 20px;
  height: 20px;
}

.black {
  background-color: #000000;
}

.white {
  background-color: #FFFFFF;
}

.blue {
  background-color: #0000FF;
}

.green {
  background-color: #008000;
}

.yellow {
  background-color: #FFFF00;
}

.red {
  background-color: #FF0000;
}

.purple {
  background-color: #800080;
}

JavaScript

(function() {

  var canvas = document.querySelector('#paint');
  var ctx = canvas.getContext('2d');

  var sketch = document.querySelector('#sketch');
  var sketch_style = getComputedStyle(sketch);
  canvas.width = parseInt(sketch_style.getPropertyValue('width'));
  canvas.height = parseInt(sketch_style.getPropertyValue('height'));

  var canvas_small = document.getElementById('brush_size');
  var context_small = canvas_small.getContext('2d');
  var centerX = canvas_small.width / 2;
  var centerY = canvas_small.height / 2;
  var radius;
  
  // Creating a tmp canvas
  var tmp_canvas = document.createElement('canvas');
  var tmp_ctx = tmp_canvas.getContext('2d');
  tmp_canvas.id = 'tmp_canvas';
  tmp_canvas.width = canvas.width;
  tmp_canvas.height = canvas.height;

  sketch.appendChild(tmp_canvas);

  var mouse = {
    x: 0,
    y: 0
  };
  var start_mouse = {
    x: 0,
    y: 0
  };
  var last_mouse = {
    x: 0,
    y: 0
  };

  // Pencil Points
  var ppts = [];

  //undo array
  var undo_arr = []; // NEWTHING

  var undo_count = 0; // NEWTHING

  var empty_canv; // NEWTHING

  // current tool
  var tool = 'brush';

  $('#tools button').on('click', function() {
    tool = $(this).attr('id');
    console.log(tool);
  })

  //NEWTHING
  $('#colors button').on('click', function() {
    tmp_ctx.strokeStyle = $(this).attr('id');
    tmp_ctx.fillStyle = tmp_ctx.strokeStyle;

    drawBrush();
  })

  /* Mouse Capturing Work */
  tmp_canvas.addEventListener('mousemove', function(e) {
    mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
    mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
  }, false);

  canvas.addEventListener('mousemove', function(e) {
    mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
    mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
  }, false);

  //NEWTHING
  var drawBrush = function() {
    context_small.clearRect(0, 0, canvas_small.width, canvas_small.height);

   ...