From a217ba8ae93591c5f1881425e9a3f2d6842e92de Mon Sep 17 00:00:00 2001
From: Mitja Felicijan <mitja.felicijan@gmail.com>
Date: Wed, 19 Sep 2018 01:53:20 +0200
Subject: content update

---
 tools/draw/app.js | 66 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 tools/draw/app.js

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

diff --git a/tools/draw/app.js b/tools/draw/app.js
new file mode 100644
index 0000000..d8b6ebf
--- /dev/null
+++ b/tools/draw/app.js
@@ -0,0 +1,66 @@
+let paintStyle = getComputedStyle(document.querySelector('section'));
+let canvas = document.querySelector('canvas');
+let ctx = canvas.getContext('2d');
+
+canvas.width = parseInt(paintStyle.getPropertyValue('width'));
+canvas.height = parseInt(paintStyle.getPropertyValue('height'));
+
+var mouse = {
+	x: 0,
+	y: 0
+};
+
+ctx.lineWidth = 3;
+ctx.lineJoin = 'round';
+ctx.lineCap = 'round';
+ctx.strokeStyle = 'limegreen';
+
+canvas.addEventListener('mousemove', function(e) {
+	mouse.x = e.pageX - this.offsetLeft;
+	mouse.y = e.pageY - this.offsetTop;
+}, false);
+
+canvas.addEventListener('mousedown', function(e) {
+	ctx.beginPath();
+	ctx.moveTo(mouse.x, mouse.y);
+	canvas.addEventListener('mousemove', onPaint, false);
+}, false);
+
+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);
+					}
+					break;
+				}
+		}
+	});
+
+});
-- 
cgit v1.2.3