title: HTML5 canvas paint realistic simple pencil
body: <p>How i can create realistic simple pencil tool, not like in a ms windows paint program. I need result like this: <img src="https://i.stack.imgur.com/URKpp.png" alt="enter image description here"></p>
  
  <p>if i try solid without transparent i get like in a ms windows paint programs not realistic pencil, if i try add opacity i see circles this is too not realistic:<img src="https://i.stack.imgur.com/FNR9x.png" alt="enter image description here"></p>
  
  <p>How i can get pencil tool like in first picture? my trying example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  
  var previousMouseX = null;
  var previousMouse = null;
  var isDrawing = false;
  
  var lineWidth = 10;
  var brush = 1;
  var myColor = "#FF0000";
  
  function getMousePosition(canvas, evt) {
      
      var rect = canvas.getBoundingClientRect();
      
      if (evt.clientX !== undefined &amp;&amp; evt.clientY !== undefined) {
          return {
              x: evt.clientX - rect.left,
              y: evt.clientY - rect.top
          };   
      } 
  }
  
  /* BUTTONS */
  $("#btn1").on("click", function() {
      ctx.globalAlpha = "0.2";
  });
  
  $("#btn2").on("click", function() {
      ctx.globalAlpha = "1";
  });
  
  $("#change-color").on("click", function() {
      ctx.strokeStyle = "#009933";
  });
  
  $("#canvas").on("mousedown", function(e) {
      isDrawing = true;
      var pos = getMousePosition(canvas, e);
      move(pos.x, pos.y);
  
  });
  
  $("#canvas").on("mousemove", function(e) {
      if(isDrawing) {
          var pos = getMousePosition(canvas, e);
          stroke(pos.x, pos.y);   
      }
  });
  
  $("#canvas").on("mouseup", function() {
      isDrawing = false;
  });
  
  function stroke(mouseX, mouseY) {
          ctx.globalCompositeOperation = "source-over";
          ctx.lineJoin = ctx.lineCap = "round";
          ctx.lineWidth = 10;
          ctx.beginPath();
          ctx.moveTo(previousMouseX, previousMouseY);
          ctx.lineTo(mouseX, mouseY);
          ctx.closePath();
          ctx.stroke();
          move(mouseX, mouseY);
  }
  
  function move(mouseX, mouseY) {
          previousMouseX = mouseX;
          previousMouseY = mouseY;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas  {
      border: 1px solid #000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input type="button" id="btn1" value="Transparent"&gt;
  &lt;input type="button" id="btn2" value="Solid"&gt;
  &lt;input type="button" id="change-color" value="Green color"&gt;&lt;br /&gt;
  &lt;canvas id="canvas" width="500" height="500"&gt;</code></pre>
  </div>
  </div>
  </p>