pastemyst

Drawing Board

(at edit #2)

present history

HTML

HTMLcopy raw

<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>
<button id="clear">Clear</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>
    <button id="refer"><a href="http://referrals.trhou.se/jasonchan2" style="text-align:center;">Learn To Code</a></button>
	</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

CSS

TypeScriptcopy raw

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, #clear, #refer {
	border: none;
	border-radius: 5px;
	margin: 10px auto;
	padding: 5px 20px;
	width: 160px;
}
#refer {
  background: #ECD13F;
  
}
a {
  text-decoration: none;
  color: white;
}
/* 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;
}

TypeScriptcopy raw

//Problem: No user interaction causes no change to application
// Solution: 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 click 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 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 slider 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();  
});
// Added clear functionality
$("#clear").click(function(){
  context.clearRect(0,0,context.canvas.width,context.canvas.height)
});

created at:

last edited at:

edits: 2

pasted by: harshhhdev

stats: 252 lines, 571 words, 5.16kb