Paint in the browser

by joplomacedo

HTML

<div class="box color-box">
    <div class="color darkgrey selected"></div>
    <div class="color red"></div>
    <div class="color blue"></div>
    <div class="color purple"></div>
    <div class="color green"></div>
    <div class="color yellow"></div>
</div>

<div class="box size-box">
    <div class="size small selected"></div>
    <div class="size medium"></div>
    <div class="size big"></div>
</div>

<div class="paint-field">
    <div class="brush"></div>
    <!-- 
        paint field
    -->
</div>

CSS

body {
    padding: 20px;
}

.box {
    display: inline-block;
    margin-right: 20px;
}



/*colors*/
.color { 
    display: inline-block;
    vertical-align: middle;
    height: 40px; width: 40px;
    cursor: pointer;
}

.red      { background: #e55138; }
.blue     { background: #0c41ff; }
.purple   { background: #a83e8d; }
.green    { background: #44cc3d; }
.yellow   { background: #ffff0c; }
.darkgrey { background: #333333; }

/*brushes*/
.size {
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    background: #333;
    cursor: pointer;
}

.small { width: 10px; height: 10px; }
.medium { width: 20px; height: 20px; }
.big { width: 40px; height: 40px; }



.selected {
    box-shadow: 0 0 0 2px gold;
}


/*paint field*/
.paint-field{
    overflow: hidden;
    height: 200px;
    width: 353px;
    margin-top: 20px;
    border: 1px solid #444;
    background-color: #eee;
    cursor: none;
}

.brush {
    display: none;
    position: absolute;
    border-radius: 50%;
}

.paint-field:hover .brush {
    display: block;
}

.dot {
    position: absolute;
    opacity: 0.8;
    width: 4px; height: 4px;
    border-radius: 50%;
}

JavaScript

var color_select =  $('.color'),
    dot_color = 'darkgrey',
    size_select = $('.size'),
    dot_size = '4px',
    mouse_down = false,
    brush = $('.brush');
brush.css({
    'background-color': dot_color,
    'width':dot_size,
    'height':dot_size
});

var new_dot = function new_dot(y, x, dot_color, dot_size) {
    var dot = $('<div/>', {
        class: 'dot',
        style: 'top: ' + y + 'px; left: ' + x + 'px; background-color: ' + dot_color + "; width:"+ dot_size + "; height: " + dot_size +";",
    });
    return dot;
}

color_select.on('click', function() {
    var $this = $(this);
    color_select.removeClass('selected');
    $this.addClass('selected');
    dot_color = $this.css('background-color');
    brush.css('background-color',dot_color);
});

size_select.on('click', function() {
    var $this = $(this);
    size_select.removeClass('selected');
    $this.addClass('selected');
    dot_size = parseInt($this.css('width'))/5*2+"px";
    brush.css({'width':dot_size,'height':dot_size});
});

$('.paint-field').on('mousedown', function() {
    mouse_down = true;
}).on('mouseup', function() {
    mouse_down = false;
}).on('mousemove', function(e) {
    if (mouse_down) {
        new_dot(e.pageY, e.pageX, dot_color, dot_size).appendTo('.paint-field');
    }
    brush.css({'top':e.pageY, 'left': e.pageX});
}).on('mouseleave', function() {
    mouse_down = false;
});