draw.html

<style type="text/css">
	#canvas {
		/*background-color: red;*/
		position: absolute;
		top: 0;
		left: 0;
		cursor: pointer;
		/*pointer-events: none;*/
	}
</style>

<canvas id="canvas"></canvas>

<script type="text/javascript">
	window.onload = function() {
		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');
		var width  = window.innerWidth;
		var height = document.body.scrollHeight;

		canvas.height = height;
		canvas.width = width;
		canvas.addEventListener('mousedown', function(e) {
			this.down = true;  
			this.X = e.pageX ;
			this.Y = e.pageY ;
			this.color = rgb();
		}, { passive: true, capture: false });

		canvas.addEventListener('mouseup', function() {
			this.down = false;
		}, 0);

		canvas.addEventListener('mousemove', function(e) {
			if(this.down) {
				ctx.beginPath();
				ctx.moveTo(this.X, this.Y - 70);
				ctx.lineCap = 'round';
				ctx.lineWidth = 10;
				ctx.lineTo(e.pageX , e.pageY - 70);
				ctx.strokeStyle = this.color;
				ctx.stroke();
		 
				this.X = e.pageX ;
				this.Y = e.pageY ;
			}
		}, 0);

		function rgb() {
			color = 'rgb(';
			for(var i = 0; i< 3; i++) {
				color += Math.floor(Math.random() * 255)+',';
			}
			return color.replace(/\,$/,')');
		}
	};
</script>