Simple Drawing Application
HTML
<canvas width="600" height="400"></canvas>
<div class="controls">
<ul>
<li class="red selected"></li>
<li class="blue"></li>
<li class="yellow"></li>
</ul>
<button id="revealColorSelect">New Color</button>
<div id="colorSelect">
<span id="newColor"></span>
<div class="sliders">
<p>
<label for="red">Red</label>
<input id="red" name="red" type="range" min=0 max=255 value=0>
</p>
<p>
<label for="green">Green</label>
<input id="green" name="green" type="range" min=0 max=255 value=0>
</p>
<p>
<label for="blue">Blue</label>
<input id="blue" name="blue" type="range" min=0 max=255 value=0>
</p>
</div>
<div>
<button id="addNewColor">Add Color</button>
</div>
</div>
</div>
CSS
body {
background: #384047;
font-family: sans-serif;
}
canvas {
background: #fff;
display: block;
margin: 50px auto 10px;
border-radius: 5px;
box-shadow: 0 4px 0 0 #222;
cursor: url(../img/cursor.png), crosshair;
}
.controls {
min-height: 60px;
margin: 0 auto;
width: 600px;
border-radius: 5px;
overflow: hidden;
}
ul {
list-style:none;
margin: 0;
float: left;
padding: 10px 0 20px;
width: 100%;
text-align: center;
}
ul li, #newColor {
display:block;
height: 54px;
width: 54px;
border-radius: 60px;
cursor: pointer;
border: 0;
box-shadow: 0 3px 0 0 #222;
}
ul li {
display: inline-block;
margin: 0 5px 10px;
}
.red {
background: #fc4c4f;
}
.blue {
background: #4fa3fc;
}
.yellow {
background: #ECD13F;
}
.selected {
border: 7px solid #fff;
width: 40px;
height: 40px;
}
button {
background: #68B25B;
box-shadow: 0 3px 0 0 #6A845F;
color: #fff;
outline: none;
cursor: pointer;
text-shadow: 0 1px #6A845F;
display: block;
font-size: 16px;
line-height: 40px;
}
#revealColorSelect {
border: none;
border-radius: 5px;
margin: 10px auto;
padding: 5px 20px;
width: 160px;
}
/* New Color Palette */
#colorSelect {
background: #fff;
border-radius: 5px;
clear: both;
margin: 20px auto 0;
padding: 10px;
width: 305px;
position: relative;
display:none;
}
#colorSelect:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 10px;
margin-left: -10px;
}
#newColor {
width: 80px;
height: 80px;
border-radius: 3px;
box-shadow: none;
float: left;
border: none;
margin: 10px 20px 20px 10px;
}
.sliders p {
margin: 8px 0;
vertical-align: middle;
}
.sliders label {
display: inline-block;
margin: 0 10px 0 0;
width: 35px;
font-size: 14px;
color: #6D574E;
}
.sliders input {
position: relative;
top: 2px;
}
#colorSelect button {
border: none;
border-top: 1px solid #6A845F;
border-radius: 0 0 5px 5px;
clear: both;
margin: 10px -10px -7px;
padding: 5px 10px;
width: 325px;
}
JAVASCRIPT
//No user interaction causes no change to application
//When user interacts cause changes appropriately
var color = $(".selected").css("background-color");
var $canvas = $("canvas");
var context = $canvas[0].getContext("2d");
var lastEvent;
var mouseDown = false;
//When clicking on control list items
$(".controls").on("click", "li", function(){
//Deselect sibling elements
$(this).siblings().removeClass("selected");
//Select clicked element
$(this).addClass("selected");
//cache current color
color = $(this).css("background-color");
});
//When "New Color" is pressed
$("#revealColorSelect").click(function(){
//Show color select or hide the color select
changeColor();
$("#colorSelect").toggle();
});
//update the new color span
function changeColor() {
var r = $("#red").val();
var g = $("#green").val();
var b = $("#blue").val();
$("#newColor").css("background-color", "rgb(" + r + "," + g +", " + b + ")");
}
//When color sliders change
$("input[type=range]").change(changeColor);
//When "Add Color" is pressed
$("#addNewColor").click(function(){
//Append the color to the controls ul
var $newColor = $("<li></li>");
$newColor.css("background-color", $("#newColor").css("background-color"));
$(".controls ul").append($newColor);
//Select the new color
$newColor.click();
});
//On mouse events on the canvas
$canvas.mousedown(function(e){
lastEvent = e;
mouseDown = true;
}).mousemove(function(e){
//Draw lines
if(mouseDown) {
context.beginPath();
context.moveTo(lastEvent.offsetX, lastEvent.offsetY);
context.lineTo(e.offsetX, e.offsetY);
context.strokeStyle = color;
context.stroke();
lastEvent = e;
}
}).mouseup(function(){
mouseDown = false;
}).mouseleave(function(){
$canvas.mouseup();
});
2 Responses