From 1881b541a2083c8d556a4d4477494f134269834f Mon Sep 17 00:00:00 2001
From: Mitja Felicijan <mitja.felicijan@gmail.com>
Date: Wed, 19 Sep 2018 02:00:43 +0200
Subject: content update

---
 tools/draw/app.js | 111 ++++++++++++++++++++++++++++--------------------------
 1 file changed, 58 insertions(+), 53 deletions(-)

(limited to 'tools/draw/app.js')

diff --git a/tools/draw/app.js b/tools/draw/app.js
index d8b6ebf..7ddc45d 100644
--- a/tools/draw/app.js
+++ b/tools/draw/app.js
@@ -1,66 +1,71 @@
-let paintStyle = getComputedStyle(document.querySelector('section'));
-let canvas = document.querySelector('canvas');
-let ctx = canvas.getContext('2d');
+window.addEventListener('load', function(evt) {
 
-canvas.width = parseInt(paintStyle.getPropertyValue('width'));
-canvas.height = parseInt(paintStyle.getPropertyValue('height'));
+	let paintStyle = getComputedStyle(document.querySelector('section'));
+	let canvas = document.querySelector('canvas');
+	let ctx = canvas.getContext('2d');
 
-var mouse = {
-	x: 0,
-	y: 0
-};
+	canvas.width = parseInt(paintStyle.getPropertyValue('width'));
+	canvas.height = parseInt(paintStyle.getPropertyValue('height'));
 
-ctx.lineWidth = 3;
-ctx.lineJoin = 'round';
-ctx.lineCap = 'round';
-ctx.strokeStyle = 'limegreen';
+	var mouse = {
+		x: 0,
+		y: 0
+	};
 
-canvas.addEventListener('mousemove', function(e) {
-	mouse.x = e.pageX - this.offsetLeft;
-	mouse.y = e.pageY - this.offsetTop;
-}, false);
+	ctx.lineWidth = 3;
+	ctx.lineJoin = 'round';
+	ctx.lineCap = 'round';
+	ctx.strokeStyle = 'limegreen';
 
-canvas.addEventListener('mousedown', function(e) {
-	ctx.beginPath();
-	ctx.moveTo(mouse.x, mouse.y);
-	canvas.addEventListener('mousemove', onPaint, false);
-}, false);
+	canvas.addEventListener('mousemove', function(e) {
+		mouse.x = e.pageX - this.offsetLeft;
+		mouse.y = e.pageY - this.offsetTop;
+	}, false);
 
-canvas.addEventListener('mouseup', function() {
-	canvas.removeEventListener('mousemove', onPaint, false);
-}, false);
+	canvas.addEventListener('mousedown', function(e) {
+		ctx.beginPath();
+		ctx.moveTo(mouse.x, mouse.y);
+		canvas.addEventListener('mousemove', onPaint, false);
+	}, false);
 
-var onPaint = function() {
-	ctx.lineCap = 'round';
-	ctx.lineTo(mouse.x, mouse.y);
-	ctx.stroke();
-};
+	canvas.addEventListener('mouseup', function() {
+		canvas.removeEventListener('mousemove', onPaint, false);
+	}, false);
 
+	var onPaint = function() {
+		ctx.lineCap = 'round';
+		ctx.lineTo(mouse.x, mouse.y);
+		ctx.stroke();
+	};
 
-document.querySelectorAll('nav button').forEach(function(button, idx) {
-	button.addEventListener('click', function(evt) {
-		console.log(button.dataset.method);
 
-		switch (button.dataset.method) {
-			case 'color':
-				{
-					ctx.strokeStyle = button.dataset.value;
-					break;
-				}
-			case 'size':
-				{
-					ctx.lineWidth = parseInt(button.dataset.value);
-					break;
-				}
-			case 'clear':
-				{
-					let clear = confirm('Do you really want to clear canvas?');
-					if (clear) {
-						ctx.clearRect(0, 0, canvas.width, canvas.height);
+	document.querySelectorAll('nav button').forEach(function(button, idx) {
+		button.addEventListener('click', function(evt) {
+			console.log(button.dataset.method);
+
+			switch (button.dataset.method) {
+				case 'color':
+					{
+						ctx.strokeStyle = button.dataset.value;
+						break;
+					}
+				case 'size':
+					{
+						ctx.lineWidth = parseInt(button.dataset.value);
+						break;
 					}
-					break;
-				}
-		}
-	});
+				case 'clear':
+					{
+						let clear = confirm('Do you really want to clear canvas?');
+						if (clear) {
+							ctx.clearRect(0, 0, canvas.width, canvas.height);
+						}
+						break;
+					}
+			}
+		});
+
+});
 
 });
+
-- 
cgit v1.2.3