From a217ba8ae93591c5f1881425e9a3f2d6842e92de Mon Sep 17 00:00:00 2001 From: Mitja Felicijan Date: Wed, 19 Sep 2018 01:53:20 +0200 Subject: content update --- draw/app.js | 66 ------------------------------------------------------------- 1 file changed, 66 deletions(-) delete mode 100644 draw/app.js (limited to 'draw/app.js') diff --git a/draw/app.js b/draw/app.js deleted file mode 100644 index d8b6ebf..0000000 --- a/draw/app.js +++ /dev/null @@ -1,66 +0,0 @@ -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