added solution for wesbos#8

d3c3n3u · d3c3n3u · commit 7cc3b470ebc2 · 2017-01-06T07:49:47.000-06:00
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
@@ -7,6 +7,49 @@
 <body>
 <canvas id="draw" width="800" height="800"></canvas>
 <script>
+
+	const canvas = document.querySelector('#draw');
+	const context = canvas.getContext('2d');
+	canvas.width = window.innerWidth;
+	canvas.height = window.innerHeight;
+
+	context.strokeStyle = '#BADA55';
+	context.lineJoin = 'round';
+	context.lineCap = 'round';
+	context.lineWidth = 5;
+
+	let isDrawing = false;
+	let lastX = 0;
+	let lastY = 0;
+	let hue = 0;
+
+	function draw(e){
+		if (!isDrawing) return; //stop function from running when mouse is not pressed down
+		console.log(e);
+		context.strokeStyle = `hsl(${hue},100%,50%)`;
+
+		context.beginPath();
+		//start from
+		context.moveTo(lastX,lastY);
+		//go to
+		context.lineTo(e.offsetX, e.offsetY);
+		context.stroke();
+
+		lastX = e.offsetX;
+		lastY = e.offsetY;
+
+		hue ++;
+
+		
+	}
+
+	canvas.addEventListener('mousemove', draw );
+	canvas.addEventListener('mousedown',function(e){
+		isDrawing = true;
+		lastX = e.offsetX;
+		lastY = e.offsetY;});
+	canvas.addEventListener('mouseup', function(){isDrawing = false});
+	canvas.addEventListener('mouseout', function(){isDrawing = false});
 </script>
 
 <style>
