cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

	<title>Simple Drawing Application</title>
	<canvas	width="600" height="400"></canvas>
	<div class="controls">
			<li class="red selected"></li>
			<li class="blue"></li>
			<li class="yellow"></li>
		<div class="btn-ctrl"><button id="revealColorSelect">New Color</button> <button id="reset">Reset</button></div>

		<div id="colorSelect">
			<span id="newColor"></span>
			<div class="sliders">
					<label for="red">Red</label>
					<input id="red" name="red" type="range" min=0 max=255 value=0>
					<label for="green">Green</label>
					<input id="green" name="green" type="range" min=0 max=255 value=0>
					<label for="blue">Blue</label>
					<input id="blue" name="blue" type="range" min=0 max=255 value=0>
			<button id="addNewColor">Add Color</button> 

              body {
	background-color: #DCC6E0;
canvas {
	background: #fff;
	display: block;
	margin: 50px auto 10px;
	border-radius: 5px;
	box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.2);
	cursor: url(http://i67.tinypic.com/15ppod4.png), crosshair;
.controls {
	min-height: 60px;
	margin: 0 auto;
	width: 600px;
	border-radius: 5px;
	overflow: hidden;
ul {
	margin: 0;
	float: 	left;
	padding: 10px 0 20px;
	width: 100%;
	text-align: center;

ul li, #newColor {
	height: 54px;
	width: 54px;
	border-radius: 60px;
	cursor: pointer;
	border: 0;
	box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.2);

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 {
	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;
	text-align: center;
#reset {
	border: none;
	border-radius: 5px;
	margin: 10px auto;
	padding: 5px 20px;
	width: 160px;
	display: inline-block;

#addNewColor {
	background-color: #3FC380;
#reset {
	background-color: #E26A6A;
	box-shadow: 0 3px 0 0 #96281B;

/* New Color Palette */
#colorSelect {
	background: #fff;
	border-radius: 5px;
	clear: both;
	margin: 20px auto 0;
	padding: 10px;
	width: 305px;
	position: relative;
#colorSelect:after {
	bottom: 100%;
	left: 24%;
	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;
.btn-ctrl {
    margin: 0 auto;
    text-align: center;
              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
  //select clicked element
  //cache current color here
  color = $(this).css('background-color');

//when new color is pressed
$("#revealColorSelect").click(function() {
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
  //update the new color span

//when add color is pressed  
$("#addNewColor").click(function() {
  //append 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

$canvas.mousedown(function(e) {
      lastEvent = e;
      mouseDown = true;
}).mousemove(function (e) {
      //draw lines  
      if(mouseDown) {
      context.moveTo(lastEvent.offsetX, lastEvent.offsetY);
      context.lineTo(e.offsetX, e.offsetY);
      context.strokeStyle = color;
      lastEvent = e;
  }).mouseup(function () {
    mouseDown = false;
  }).mouseleave(function () {

//When clicked reset the canvas back to an empy canvas 
//Used the [0] to select the correct element in canvas
    context.clearRect(0,0, $canvas[0].width, $canvas[0].height); 

Loading ..................