Javascript - Drawing Board (With Drag)

by tylerbrownhenry

HTML

<div class="e" style="width:288px; height:288px"></div>

<span class="console"></span>
<div class="btn tool" id="darken"></div>
<div class="btn tool" id="pencil"></div>
<div class="btn color" id="#23ffff"></div>
<div class="btn" id="eyedropper"></div>
<div class="btn tool" id="pen"></div>
<!-- http://refreshless.com/nouislider/ -->
<input class="brushSize" type='text' value='55'>
<input class="darkenAmount" type='text' value='55'>

CSS

.e{
    border:1px solid #ccc;
    position: relative;
    overflow:hidden;
}

#cursor{
    position:absolute;
    border:1px solid #aaa;
    box-shadow: 0px 0px 16px #333;
}

.circle{
    height:45px;
    width:45px;
    border-radius:25px;
}

.square{
    height:45px;
    width:45px;
    border-radius:0px;
}

.btn{
    width:10px;
    height:10px;
    display:block;
    border:1px solid #000;
}

.pixel{
    width:9px;
    height:9px;
    display:block;
    float:left;
    outline:1px dotted #ddd;  
}
.pixel:hover{
 
 outline:1px solid #ccc;   
}

.vLineL{
    height:100px;
    background-color:#333;
    width:1px;
    position:absolute;
    
};

JavaScript

//TODO:
// Fix Darken Colors
// Resize hover state properly
// Add Color Selection
// Add 'Fuzzy Corners'
// Opacity
// Hardness
// Fill?
// Line?
// Marquee?
//#------->

//Thanks to: http://designwithpc.com/  | Prashant Chaudhary for this
jQuery.fn.setBorderRadius = function(size) {
    var rSize = size;
    if(settings.brush.shape === 'square'){ rSize = 0};
        var borderRadiusObj = {
            '-moz-border-radius': rSize,
            '-webkit-border-radius': rSize,
            'border-radius': rSize
        }
        return (this).css(borderRadiusObj).css('width',size).css('height',size);
};

Function.prototype.memoized = function(key){
    this._values = this._values || {};
    return this._values[key] !== undefined ?
        this._values[key] :
        this._values[key] = this.apply(this, arguments);
};

Function.prototype.memoize = function(){
    var ftn = this;
    return function(){
        return ftn.memoized.apply(ftn,arguments);
    };
};

if ( !Array.prototype.forEach ) {
  Array.prototype.forEach = function(fn, scope) {
    for(var i = 0, len = this.length; i < len; ++i) {
      fn.call(scope, this[i], i, this);
    }
  }
};

//#-------------->



settings = {offSet:30,pixelSize:9};
settings.brush = {size:6,shape:'circle',darken: {que:0}};

settings.tool = function(f){
    if(f == true){
        this.change = true;
    } else {
        this.change = false;
    };
};

settings.changeColor = (function(c){
    settings.color = c;
    return settings.color;    
});

settings.brush.darkenAmount = (function(n){
    settings.darken = n * settings.brush.darken.que;
    return settings.darken;    
});






settings.tool = true;

$('.brushSize').change(function() {
        var changeSize = (settings.brush.size * settings.pixelSize)+'px';
  settings.brush.changeSize(parseInt($(this).val()),changeSize);


});
$('.darkenAmount').change(function() {
  settings.brush.darkenAmount(1);
});



function cvtRGBtoHex(color){
    if(color.indexOf('rgb') !== -1){
...