HTML5 Canvas Whiteboard (Touch and Mouse)

Learn how to create HTML5 Canvas Whiteboard (Touch and Mouse) using html, css and/or js.

<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Drawing Board</title>
<script type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
</head>
<body>
	<canvas id="myCanvas">
		Sorry, your browser does not support HTML5 canvas technology.
	</canvas>
  
<style>
* {
	margin: 0;
	padding: 0;
}

body, html {
	height: 100%;
}

#myCanvas {
	cursor: crosshair;
    position: fixed;
}
</style>

ctx.beginPath();
			ctx.moveTo(
				evt.touches[0].pageX,
				evt.touches[0].pageY
			);

this.started = true;

},
		move: function(evt) {

if (this.started) {
				ctx.lineTo(
					evt.touches[0].pageX,
					evt.touches[0].pageY
				);

ctx.strokeStyle = "#000";
				ctx.lineWidth = 5;
				ctx.stroke();
			}

},
		end: function(evt) {
			this.started = false;
		}
	};
	
	// Touch Events
	myCanvas.addEventListener('touchstart', draw.start, false);
	myCanvas.addEventListener('touchend', draw.end, false);
	myCanvas.addEventListener('touchmove', draw.move, false);
	
	// Disable Page Move
	document.body.addEventListener('touchmove',function(evt){
		evt.preventDefault();
	},false);
};
</script>
</body>
</html>

HTML5 Canvas Whiteboard (Touch and Mouse)

Random HTML Example Codes: