Draw Stuff

by mrjordy

HTML

<div class="LineWidthSliderContainer">
  <div class="LineWidthSlider inline">Line Size:
    <input id="pencilSlider" type="range" min="1" max="50" value="4" />
  </div>
  <div class="pencilSize inline" id="pencilSliderResult"></div>
</div>

<div class="ToolsContainer">
  <div class="Tools relative">
    <a href="#" class="changeDrawColor" data-options='{"color":"#f44336"}'><div class="Paint Swatch inline" style="background: #f44336;"></div></a>
    <a href="#" class="changeDrawColor" data-options='{"color":"#E91E63"}'><div class="Paint Swatch inline" style="background: #E91E63;"></div></a>
    <a href="#" class="changeDrawColor" data-options='{"color":"#9C27B0"}'><div class="Paint Swatch inline" style="background: #9C27B0;"></div></a>
    <a href="#" class="changeDrawColor" data-options='{"color":"#673AB7"}'><div class="Paint Swatch inline" style="background: #673AB7;"></div></a>
    <a href="#" class="changeDrawColor" data-options='{"color":"#3F51B5"}'><div class="Paint Swatch inline" style="background: #3F51B5;"></div></a>
    <a href="#" class="changeDrawColor" data-options='{"color":"#2196F3"}'><div class="Paint Swatch inline" style="background: #2196F3;"></div></a>
    <a href="#" class="changeDrawColor" data-options='{"color":"#03A9F4"}'><div class="Paint Swatch inline" style="background: #03A9F4;"></div></a>
    <a href="#" class="changeDrawColor" data-options='{"color":"#00BCD4"}'><div class="Paint Swatch inline" style="background: #00BCD4;"></div></a>
    <a href="#" class="changeDrawColor" data-options='{"color":"#009688"}'><div class="Paint Swatch inline" style="background: #009688;"></div></a>
    <a href="#" class="changeDrawColor" data-options='{"color":"#4CAF50"}'><div class="Paint Swatch inline" style="background: #4CAF50;"></div></a>
    <a href="#" class="changeDrawColor" data-options='{"color":"#8BC34A"}'><div class="Paint Swatch inline" style="background: #8BC34A;"></div></a>
    <a href="#" class="changeDrawColor"...

CSS

body {
  padding: 0px;
  margin: 0px;
  text-align: center;
}

.inline {
  display: inline-block;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

#sketch {
  border: 1px solid #888888;
  background-color: white;
  border-radius: 0px;
}

.Paint.Swatch {
  width: 20px;
  height: 20px;
  border: 1px solid black;
  border-radius: 3px;
}

.changeDrawWidth {
  min-height: 30px;
  min-width: 30px;
  background: white;
  display: inline-block;
}

.Size.Swatch {
  border-radius: 100px;
  background: black;
  margin: 0 2px;
  vertical-align: middle;
}

#pencilSlider {
  width: 200px;
  height: 50px;
  line-height: 54px;
  vertical-align: middle;
}

.pencilSize {
  width: 40px;
  border-radius: 50px;
  background: black;
  text-align: center;
  height: 4px;
  width: 4px;
  vertical-align: middle;
}

.LineWidthSlider {
  height: 50px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.LineWidthSliderContainer {
  position: relative;
}

.SketchPad.cursor1 {cursor: url('http://techstatic.org/techstatic.org/draw/cursors/cursor01.png') 1 1, auto}
.SketchPad.cursor2 {cursor: url('http://techstatic.org/techstatic.org/draw/cursors/cursor01.png') 1 1, auto}
.SketchPad.cursor3 {cursor: url('http://techstatic.org/techstatic.org/draw/cursors/cursor01.png') 1 1, auto}
.SketchPad.cursor4 {cursor: url('http://techstatic.org/techstatic.org/draw/cursors/cursor01.png') 1 1, auto}
.SketchPad.cursor5 {cursor: url('http://techstatic.org/techstatic.org/draw/cursors/cursor01.png') 1 1, auto}
.SketchPad.cursor6 {cursor: url('http://techstatic.org/techstatic.org/draw/cursors/cursor06.png') 2 2, auto}
.SketchPad.cursor7 {cursor: url('http://techstatic.org/techstatic.org/draw/cursors/cursor06.png') 2 2, auto}
.SketchPad.cursor8 {cursor: url('http://techstatic.org/techstatic.org/draw/cursors/cursor08.png') 3 3, auto}
.SketchPad.cursor9 {cursor: url('http://techstatic.org/techstatic.org/draw/cursors/cursor08.png') 3 3, auto}
.SketchPad.cursor10 {cursor:...

JavaScript

//-------------------------------------------------- Change Color
$(function() { 
    $(".changeDrawColor").click(function(event) { 
        var options = $(this).data("options");
      sketcher.context.strokeStyle = options.color
    	  $('#pencilSliderResult').css({
  		 	 background: options.color,
    	});
    });
});
//-------------------------------------------------- Change Line Width and Cursor with slider 
$(document).ready ( function(){
   var pencilTipSize = document.getElementById("pencilSlider");
var pencilTipSizeResult = document.getElementById("pencilSliderResult");

pencilTipSize.addEventListener("input", function() {
    $('#pencilSliderResult').css({
    width: pencilTipSize.value,
    height: pencilTipSize.value,
    });
    
    sketcher.context.lineWidth = pencilTipSize.value;
    
    $( ".SketchPad" ).attr('class', 'SketchPad customCursor cursor'+pencilTipSize.value);
	}, false); 
	
});

//----------------------------------------------------------------------------------------

var sketcher = null;
$(document).ready(function(e) {
	sketcher = new Sketcher( "sketch" );
});

//----------------------------------------------------------------------------------------

function Sketcher( canvasID, brushImage ) {
	this.renderFunction = (brushImage == null || brushImage == undefined) ? this.updateCanvasByLine : this.updateCanvasByBrush;
	this.brush = brushImage;
	this.touchSupported = Modernizr.touch;
	this.canvasID = canvasID;
	this.canvas = $("#"+canvasID);
	this.context = this.canvas.get(0).getContext("2d");	
	this.context.strokeStyle = "black";
	this.context.lineWidth = 4;
  this.context.lineJoin = "round";                              //----NEW
  this.context.lineCap = "round";                               //----NEW
	this.lastMousePoint = {x:0, y:0};
    
	if (this.touchSupported) {
		this.mouseDownEvent = "touchstart";
		this.mouseMoveEvent = "touchmove";
		this.mouseUpEvent = "touchend";
	}
	else {
		this.mouseDownEvent =...