Simple Canvas Demo

by Prasad

HTML

<body onLoad="canvasSupoort()">
<section class="canvasArea">
  <canvas id="canvasDemo" width="300" height="400"> </canvas>
</section>
<section class="buttonsArea">
  <!--<input type="number" name="width" placeholder="Width">
  <input type="number" name="height" placeholder="Height">-->
  <button class="rect">
  
  </button>
  <button class="arc">
  
  </button>
  <button class="clearCanvas">Clear</button>
  <input type="checkbox" id="chkAnimate" name="chkAnimate">Animate
</section>
</body>

CSS

canvas {
	border: 1px solid #eee;
}
input {
	padding: 8px 4px;
}
.canvasArea, .buttonsArea {
	display:inline-block;
	vertical-align: top;
}
button {
	background-color:#047ED6;	
	padding:3px 2px;
	border: none;
	box-shadow: 0 3px 6px  #333;
	cursor: pointer;
	margin: 0 5px;
	color: #eee;
}
button:active {
	background-color:#047ED6;	
	padding:3px 2px;
	border: none;
	box-shadow: 0 3px 3px  #333 inset;
	cursor: pointer;	
	margin: 0 5px;
}
.rect {
	width:20px;
	height: 20px;
	border: 1px solid #eee;
}
.arc {
	width:20px;
	height: 20px;
	border: 1px solid #eee;
	border-radius: 12px;
}

JavaScript

// JavaScript Document
var canvas, ctx, animate, intClear,j;
animate= false; j=0;
	function canvasSupoort() {
		canvas = document.getElementById('canvasDemo');	
		if(canvas.getContext) {
			ctx=canvas.getContext('2d');			
		}
		else {
			/*alert("Browser Does Not Supports Canavas");*/
		}	
		console.log(canvas);
	}

$(document).ready(function(){		
	$('.rect').on('click',function(){
		var i=j=ww=0;
		clearCanvas();
		ww=$('#canvasDemo').attr('width') - 4;
		ctx.fillStyle="#AD4A39";
		if(animate){			intClear=setInterval(function(){								
				if(i>=50){					ctx.fillStyle="rgb(214,200,154)";					
				}	
				if(i>ww) {
					ctx.strokeStyle="red";
					ctx.strokeRect(2,2,i,i)
					resetInterval();	
				}
				ctx.fillRect(2,2,i,i);
				i++;				
			},50);
		}
		else {
		ctx.fillRect(80,80,100,100);
		}		
	});
	$('.clearCanvas').on('click',function(){
		clearCanvas();
	});
	$('.arc').on('click',function(){
		clearCanvas();
		var ww=i=0;
		ctx.fillStyle="#AD4A39";
		ww=($('#canvasDemo').attr('width') / 3) - 4;		
		if(animate){			intClear=setInterval(function(){								
				if(i>=50){					ctx.fillStyle="rgb(214,200,154)";					
				}	
				if(i>ww) {
					ctx.strokeStyle="red";
					ctx.arc(100,100,i,0,Math.PI*2, true);
					resetInterval();	
				}
				else{
				ctx.arc(100,100,i,Math.PI*2,0, true);
				}
				ctx.fill()
				i++;				
			},50);
		}
		else {
		ctx.arc(100,100,50,0,Math.PI*2, true);
		ctx.fill()
		}		
	});
	$('#chkAnimate').on('click',function() {
		if($(this).is(':checked')){
			animate= true;					
		}
		else {
			animate= false;			
			resetInterval();
		}
	});
})
function resetCnt(j) {	
	return j;
}
function resetInterval() {
	window.clearInterval(intClear);
}

function clearCanvas() {
	var canvasw=$('#canvasDemo').attr('width');
		var canvash=$('#canvasDemo').attr('height');
		ctx.clearRect(0,0,canvasw,canvash);	
		resetInterval();	
}