Canvas

Table of Contents

• Canvas
• HTML 5 CANVAS
  • BASIC USAGE EXAMPLE
  • Example: Canvas with a “draw loop”
  • Example: Canvas with a “draw loop” using RequestAnimationFrame

HTML 5 CANVAS

HTML 5 introduced support for a canvas element that can be programmatically drawn on. The really nice thing is that it is very similar to drawing using p5.js (in fact, most of the core of p5.js uses the canvas element).

BASIC USAGE EXAMPLE

<canvas width="400" height="400" id="mycanvas"></canvas>
<script type="text/javascript">
	let canvas = document.getElementById('mycanvas');
	let context = canvas.getContext('2d');
	context.fillStyle="#FF0000";
	context.fillRect(0,0,canvas.width,canvas.height);
</script>

Example: Canvas with a “draw loop”

<canvas width="300" height="300" id="mycanvas2" ></canvas>

<script type="text/javascript">
	
	let canvas2 = document.getElementById('mycanvas2');
	let context2 = canvas2.getContext('2d');
	
	let x2 = 0;
	let y2 = Math.random()*canvas2.width;
	function drawOnCanvas() {
		context2.beginPath();
		context2.strokeStyle='#'+(Math.random()*0xFFFFFF<<0).toString(16);
		context2.moveTo(x2,y2);
		context2.lineTo(canvas2.width/2,canvas2.height/2);
		context2.stroke();
		x2++;
		if (x2 > canvas2.width) { x2 = 0; }
		y2 = Math.random()*canvas2.width;
	};
				
	setInterval(drawOnCanvas,1000/30); // 30 x per second
	
</script>

Example: Canvas with a “draw loop” using RequestAnimationFrame

<canvas width="400" height="400" id="mycanvas3" />

<script type="text/javascript">
	
	var canvas = document.getElementById('mycanvas3');
	var context = canvas.getContext('2d');
	
	var x = 0;
	var y = Math.random()*canvas.width;
	var drawFrame = function() {
		context.beginPath();
		context.strokeStyle='#'+(Math.random()*0xFFFFFF<<0).toString(16);
		context.moveTo(x,y);
		context.lineTo(canvas.width/2,canvas.height/2);
		context.stroke();
		x++;
		if (x > canvas.width) { x = 0; }
		y = Math.random()*canvas.width;
	};
				

	var animationLooper = function() {
		drawFrame();
		window.requestAnimationFrame(animationLooper);
	}
	
	document.addEventListener('load', animationLooper);
				
</script>

Example: Canvas with a “draw” loop (Uses JavaScript setInterval) Example: Canvas with a “draw” loop (Uses requestAnimationFrame) Example: Canvas with “draw” loop and mouse interaction

Reference: W3 Schools – HTML5 Canvas and W3 Schools – HTML Canvas Reference Tutorial: Mozilla Developer Network – Canvas Tutorial Examples: 21 Ridiculously Impressive HTML5 Canvas Experiments