From b4ac37bb3f8db64b7b9e133723cade543a4fe799 Mon Sep 17 00:00:00 2001
From: Peter O'Shaughnessy <peter.oshaughnessy@gmail.com>
Date: Thu, 27 Jul 2017 14:43:47 +0100
Subject: [PATCH] Pencil style improvements and change default size

---
 build/bundle.js | 9 ++++++++-
 index.html      | 4 ++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/build/bundle.js b/build/bundle.js
index 734d8b5..c2dd800 100644
--- a/build/bundle.js
+++ b/build/bundle.js
@@ -1868,6 +1868,7 @@ function init$1() {
 var RESIZING_TIME_THRESHOLD = 500;
 var DEFAULT_EMOJI_SIZE = 120;
 var DEFAULT_EMOJI_FONT = 'arial';
+var DEFAULT_LINE_WIDTH = 2;
 
 var canvas$1 = document.getElementById('canvas-draw');
 var ctx = ctx = canvas$1.getContext('2d');
@@ -2115,6 +2116,8 @@ function redraw() {
       // Stroke
       ctx.strokeStyle = evt.strokeStyle;
       ctx.lineWidth = evt.lineWidth;
+      ctx.lineJoin = 'round';
+      ctx.lineCap = 'round';
       ctx.lineTo(evt.x, evt.y);
       ctx.stroke();
     }
@@ -2149,7 +2152,9 @@ function initCanvas$1() {
   canvas$1.addEventListener('mouseup', onTouchEndOrMouseUp, false);
 
   ctx.strokeStyle = '#000000';
-  ctx.lineWidth = 3;
+  ctx.lineWidth = DEFAULT_LINE_WIDTH;
+  ctx.lineJoin = 'round';
+  ctx.lineCap = 'round';
 }
 
 function initControls$2() {
@@ -2196,6 +2201,8 @@ function initControls$2() {
   colourInput.addEventListener('click', onColourClickOrChange);
 
   sizeInput.addEventListener('change', onSizeChange);
+  sizeInput.value = DEFAULT_LINE_WIDTH;
+  sizeOutput.innerHTML = DEFAULT_LINE_WIDTH;
 
   trashButton.addEventListener('click', function () {
     // Could do with a confirmation prompt!
diff --git a/index.html b/index.html
index 53a7ff3..1009dd2 100644
--- a/index.html
+++ b/index.html
@@ -123,8 +123,8 @@ <h2>About Snapwat</h2>
         <label for="input-colour">Colour</label>
       </div>
       <div id="input-size-container" class="input-container">
-        <input id="input-size" type="range" min="1" max="20" value="1"/>
-        <label for="input-size">Size: <span id="size-output">1</span></label>
+        <input id="input-size" type="range" min="1" max="20"/>
+        <label for="input-size">Size: <span id="size-output"></span></label>
       </div>
     </div>