JS Paint

by Jayson Buquia

HTML

<div class="clear">Clear</div>

CSS

.brush {
    width : 10px;
    height: 10px;
    border-radius: 99999px;
    opacity: 0.1;
    pointer-events: none;
    background: black;
    box-shadow: 0 0 10px black;
}

.ch {
    cursor: crosshair;
}

JavaScript

$('.clear').click(function(){
    $('.brush').remove();
});

$('html').mousedown(function(e){
    e.preventDefault();
    addpoint(e);   
    $(this).addClass('ch').mousemove(function(f){
       addpoint(f);
        addpoint(f);
}).mouseup(function(){
    $(this).removeClass('ch').unbind('mousemove');
});    
});

function addpoint(e) {
            $('<div>').addClass('brush').appendTo($('body')).offset({top:e.pageY-5, left: e.pageX-5});
}