diff --git a/touch.js b/touch.js index 0afa3f1..d0f7867 100644 --- a/touch.js +++ b/touch.js @@ -1,4 +1,4 @@ -const debug = true; +const debug = false; const FG_COLOR = "#000"; const BG_COLOR = "#666"; @@ -44,8 +44,7 @@ function activateUIHandlers() { }); document.querySelector("#invert").addEventListener('click', () => { - penColor = (penColor === BG_COLOR) ? FG_COLOR : BG_COLOR; - document.querySelector('#invert').src = COLOR_STATE_SYMBOLS[penColor]; + invertColors(); }) penModeSelections.forEach(([elementId, penFunction, defaultPenSize]) => { @@ -59,9 +58,17 @@ function activateUIHandlers() { document.querySelector('#clear').addEventListener('click', (event) => { event.preventDefault(); updateCanvasSize(); + invertColors(true); }); } +function invertColors(reset=false) { + const invertElement = document.querySelector('#invert'); + + penColor = (reset) ? FG_COLOR : (penColor === BG_COLOR) ? FG_COLOR : BG_COLOR; + invertElement.src = COLOR_STATE_SYMBOLS[penColor]; +} + function updatePenSize(val) { penSize = (val > 0) ? val : 1; document.querySelector('#penSizeSlider').value = penSize; @@ -140,8 +147,7 @@ function flat(touch) { ctx.beginPath(); ctx.moveTo(prev.pageX, prev.pageY); ctx.lineTo(touch.pageX, touch.pageY); - - ctx.lineWidth = (touch.force === 0) ? penSize : penSize * (1+touch.force); + ctx.lineWidth = penSize; ctx.strokeStyle = penColor; ctx.stroke(); } @@ -170,7 +176,7 @@ function circle(touch) { addTouchEntry(touch); ctx.beginPath(); ctx.strokeStyle = penColor; - ctx.fillStyle = penColor; + ctx.lineWidth = 1; ctx.arc(touch.pageX, touch.pageY, penSize, 0, 2 * Math.PI); ctx.stroke();