title: Draw multiple paths on HTML Canvas
body: <p>Hi There Im having an issue with my HTML canvas, It works fine its just when I draw on the canvas its just one continuous long stroke from one touch point. is it possible to have it in a way that you draw then stop then draw again and so on. I.E. just draw multiple times with the canvas not just one continuous stroke? like to be able to draw a face for example? See below my code. Appreciate any help.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Page Title&lt;/title&gt;
  
  
  &lt;style&gt;
  canvas { border: 5px solid blue }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;canvas id="c" width="500" height="300"&gt;&lt;/canvas&gt;
  &lt;h1&gt;This is a Heading&lt;/h1&gt;
  &lt;p&gt;This is a paragraph.&lt;/p&gt;
  
  
  &lt;script&gt;
  function midPointBtw(p1, p2) {
    return {
      x: p1.x + (p2.x - p1.x) / 2,
      y: p1.y + (p2.y - p1.y) / 2
    };
  }
  
  function getPattern() {
    return ctx.createPattern(img, 'repeat');
  }
  
  
  var el = document.getElementById('c');
  var ctx = el.getContext('2d');
  
  ctx.lineWidth = 50;
  ctx.lineJoin = ctx.lineCap = 'round';
  
  var img = new Image;
  img.onload = function() {
    ctx.strokeStyle = getPattern();
  };
  img.src = "https://i.postimg.cc/rF2R0GRY/dick2.png";
  
  var isDrawing, points = [];
  
  
  
  
  var getXY = function(e) {
    var source = e.touches ? e.touches[0] : e;
  
    return {
      x: source.clientX,
      y: source.clientY
    };
  };
  
  var startDrawing = function(e) {
    isDrawing = true;
    points.push(getXY(e));
    event.preventDefault();
  
  };
  
  
  var keepDrawing = function(e) {
    if (!isDrawing) return;
  
    points.push(getXY(e));
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  
    var p1 = points[0];
    var p2 = points[1];
  
    ctx.beginPath();
    ctx.moveTo(p1.x, p1.y);
  
    for (var i = 1, len = points.length; i &lt; len; i++) {
      var midPoint = midPointBtw(p1, p2);
      ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
      p1 = points[i];
      p2 = points[i + 1];
    }
    ctx.lineTo(p1.x, p1.y);
    ctx.stroke();
    event.preventDefault();
  };
  
  
  var stopDrawing = function() {
    isDrawing = false;
    points = [];
  };
  
  el.addEventListener('touchstart', startDrawing);
  el.addEventListener('mousedown', startDrawing);
  
  el.addEventListener('touchmove', keepDrawing);
  el.addEventListener('mousemove', keepDrawing);
  
  el.addEventListener('touchend', stopDrawing);
  el.addEventListener('mouseup', stopDrawing);
  
  function clearCanvas(canvas,ctx) {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
      }
  
  
  
  &lt;/script&gt;
  
  
  &lt;form id ="search"&gt;
  &lt;input type = "text" name="message" id="user_input"&gt;
  &lt;input type = "submit" value="Clear Sketchpad" id="clearbutton" 
   onclick="clearCanvas(canvas,ctx);"&gt;
  &lt;/form&gt;
  
  
  
  &lt;p&gt;&lt;span id='display'&gt;&lt;/span&gt;&lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>