Simple canvas drawing -- simplified lines

In this example below you will see how to do a Simple canvas drawing -- simplified lines with some HTML / CSS and Javascript

Grabs mouse points as the user draws, but then use [simplify.js][1] to (dramatically) reduce the number of points stored.

Thumbnail
This awesome code was written by anandthakker, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright anandthakker ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Simple canvas drawing -- simplified lines</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  Draw something:
<canvas id="canvas" width="900" height="600"></canvas>
  <script src='https://mourner.github.io/simplify-js/simplify.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/anandthakker/simple-canvas-drawing-simplified-lines-AaqzI */
canvas {
  border: 1px solid gray;
  max-width: 100%;
}

/*Downloaded from https://www.codeseek.co/anandthakker/simple-canvas-drawing-simplified-lines-AaqzI */
(function() {
  var canvas, ctx, drawing, lines, mouseCoords, move, render, start, stop;

  canvas = document.getElementById('canvas');

  ctx = canvas.getContext('2d');

  mouseCoords = function(canvas, e) {
    var rect, ref, ref1, ref2, ref3, x, y;
    rect = canvas.getBoundingClientRect();
    x = (ref = e.clientX) != null ? ref : (ref1 = e.changedTouches) != null ? ref1[0].clientX : void 0;
    y = (ref2 = e.clientY) != null ? ref2 : (ref3 = e.changedTouches) != null ? ref3[0].clientY : void 0;
    return [(x - rect.left) / rect.width * canvas.width, (y - rect.top) / rect.height * canvas.height];
  };

  drawing = false;

  lines = [];

  render = function(line) {
    var i, len, x, y;
    ctx.beginPath();
    for (i = 0, len = line.length; i < len; i++) {
      ({
        x: x,
        y: y
      } = line[i]);
      ctx.lineTo(x, y);
    }
    ctx.stroke();
    return ctx.closePath();
  };

  move = function(e) {
    var currentLine, x, y;
    if (!drawing) {
      return;
    }
    e.preventDefault();
    [x, y] = mouseCoords(this, e);
    currentLine = lines[lines.length - 1];
    currentLine.push({
      x: x,
      y: y
    });
    return render(currentLine);
  };

  start = function() {
    drawing = true;
    return lines.push([]);
  };

  stop = function() {
    var currentLine, i, len, line, results;
    drawing = false;
    currentLine = lines[lines.length - 1];
    currentLine.push(currentLine[0]);
    lines[lines.length - 1] = simplify(currentLine, 5);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    results = [];
    for (i = 0, len = lines.length; i < len; i++) {
      line = lines[i];
      results.push(render(line));
    }
    return results;
  };

  canvas.addEventListener('mousemove', move, false);

  canvas.addEventListener('touchmove', move, false);

  canvas.addEventListener('mousedown', start);

  canvas.addEventListener('touchstart', start);

  canvas.addEventListener('mouseup', stop);

  canvas.addEventListener('touchend', stop);

}).call(this);

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUU7QUFBQSxNQUFBLE1BQUEsRUFBQSxHQUFBLEVBQUEsT0FBQSxFQUFBLEtBQUEsRUFBQSxXQUFBLEVBQUEsSUFBQSxFQUFBLE1BQUEsRUFBQSxLQUFBLEVBQUE7O0VBQUEsTUFBQSxHQUFTLFFBQVEsQ0FBQyxjQUFULENBQXdCLFFBQXhCOztFQUNULEdBQUEsR0FBTSxNQUFNLENBQUMsVUFBUCxDQUFrQixJQUFsQjs7RUFFTixXQUFBLEdBQWMsUUFBQSxDQUFDLE1BQUQsRUFBUyxDQUFULENBQUE7QUFDWixRQUFBLElBQUEsRUFBQSxHQUFBLEVBQUEsSUFBQSxFQUFBLElBQUEsRUFBQSxJQUFBLEVBQUEsQ0FBQSxFQUFBO0lBQUEsSUFBQSxHQUFPLE1BQU0sQ0FBQyxxQkFBUCxDQUFBO0lBQ1AsQ0FBQSw2RUFBa0MsQ0FBQSxDQUFBLENBQUUsQ0FBQztJQUNyQyxDQUFBLCtFQUFrQyxDQUFBLENBQUEsQ0FBRSxDQUFDO1dBQ3JDLENBQ0UsQ0FBQyxDQUFBLEdBQUksSUFBSSxDQUFDLElBQVYsQ0FBQSxHQUFrQixJQUFJLENBQUMsS0FBdkIsR0FBK0IsTUFBTSxDQUFDLEtBRHhDLEVBRUUsQ0FBQyxDQUFBLEdBQUksSUFBSSxDQUFDLEdBQVYsQ0FBQSxHQUFpQixJQUFJLENBQUMsTUFBdEIsR0FBK0IsTUFBTSxDQUFDLE1BRnhDO0VBSlk7O0VBVWQsT0FBQSxHQUFVOztFQUNWLEtBQUEsR0FBUTs7RUFFUixNQUFBLEdBQVMsUUFBQSxDQUFDLElBQUQsQ0FBQTtBQUNQLFFBQUEsQ0FBQSxFQUFBLEdBQUEsRUFBQSxDQUFBLEVBQUE7SUFBQSxHQUFHLENBQUMsU0FBSixDQUFBO0lBQ0EsS0FBQSxzQ0FBQTtPQUFJO1FBQUMsQ0FBQSxFQUFHLENBQUo7UUFBTSxDQUFBLEVBQUc7TUFBVDtNQUNGLEdBQUcsQ0FBQyxNQUFKLENBQVcsQ0FBWCxFQUFhLENBQWI7SUFERjtJQUVBLEdBQUcsQ0FBQyxNQUFKLENBQUE7V0FDQSxHQUFHLENBQUMsU0FBSixDQUFBO0VBTE87O0VBT1QsSUFBQSxHQUFPLFFBQUEsQ0FBQyxDQUFELENBQUE7QUFDTCxRQUFBLFdBQUEsRUFBQSxDQUFBLEVBQUE7SUFBQSxJQUFBLENBQWMsT0FBZDtBQUFBLGFBQUE7O0lBQ0EsQ0FBQyxDQUFDLGNBQUYsQ0FBQTtJQUNBLENBQUMsQ0FBRCxFQUFHLENBQUgsQ0FBQSxHQUFRLFdBQUEsQ0FBWSxJQUFaLEVBQWtCLENBQWxCO0lBRVIsV0FBQSxHQUFjLEtBQU0sQ0FBQSxLQUFLLENBQUMsTUFBTixHQUFlLENBQWY7SUFDcEIsV0FBVyxDQUFDLElBQVosQ0FBaUI7TUFBQyxDQUFBLEVBQUcsQ0FBSjtNQUFNLENBQUEsRUFBRztJQUFULENBQWpCO1dBRUEsTUFBQSxDQUFPLFdBQVA7RUFSSzs7RUFXUCxLQUFBLEdBQVEsUUFBQSxDQUFBLENBQUE7SUFDTixPQUFBLEdBQVU7V0FDVixLQUFLLENBQUMsSUFBTixDQUFXLEVBQVg7RUFGTTs7RUFJUixJQUFBLEdBQU8sUUFBQSxDQUFBLENBQUE7QUFDTCxRQUFBLFdBQUEsRUFBQSxDQUFBLEVBQUEsR0FBQSxFQUFBLElBQUEsRUFBQTtJQUFBLE9BQUEsR0FBVTtJQUNWLFdBQUEsR0FBYyxLQUFNLENBQUEsS0FBSyxDQUFDLE1BQU4sR0FBZSxDQUFmO0lBQ3BCLFdBQVcsQ0FBQyxJQUFaLENBQWlCLFdBQVksQ0FBQSxDQUFBLENBQTdCO0lBQ0EsS0FBTSxDQUFBLEtBQUssQ0FBQyxNQUFOLEdBQWUsQ0FBZixDQUFOLEdBQTBCLFFBQUEsQ0FBUyxXQUFULEVBQXNCLENBQXRCO0lBRTFCLEdBQUcsQ0FBQyxTQUFKLENBQWMsQ0FBZCxFQUFpQixDQUFqQixFQUFvQixNQUFNLENBQUMsS0FBM0IsRUFBa0MsTUFBTSxDQUFDLE1BQXpDO0FBQ0E7SUFBQSxLQUFBLHVDQUFBOzttQkFDRSxNQUFBLENBQU8sSUFBUDtJQURGLENBQUE7O0VBUEs7O0VBV1AsTUFBTSxDQUFDLGdCQUFQLENBQXdCLFdBQXhCLEVBQXFDLElBQXJDLEVBQTJDLEtBQTNDOztFQUNBLE1BQU0sQ0FBQyxnQkFBUCxDQUF3QixXQUF4QixFQUFxQyxJQUFyQyxFQUEyQyxLQUEzQzs7RUFDQSxNQUFNLENBQUMsZ0JBQVAsQ0FBd0IsV0FBeEIsRUFBcUMsS0FBckM7O0VBQ0EsTUFBTSxDQUFDLGdCQUFQLENBQXdCLFlBQXhCLEVBQXNDLEtBQXRDOztFQUNBLE1BQU0sQ0FBQyxnQkFBUCxDQUF3QixTQUF4QixFQUFrQyxJQUFsQzs7RUFDQSxNQUFNLENBQUMsZ0JBQVAsQ0FBd0IsVUFBeEIsRUFBb0MsSUFBcEM7QUF0REEiLCJzb3VyY2VzQ29udGVudCI6WyIgIGNhbnZhcyA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjYW52YXMnKVxuICBjdHggPSBjYW52YXMuZ2V0Q29udGV4dCgnMmQnKVxuXG4gIG1vdXNlQ29vcmRzID0gKGNhbnZhcywgZSkgLT5cbiAgICByZWN0ID0gY2FudmFzLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpXG4gICAgeCA9IGUuY2xpZW50WCA/IGUuY2hhbmdlZFRvdWNoZXM/WzBdLmNsaWVudFhcbiAgICB5ID0gZS5jbGllbnRZID8gZS5jaGFuZ2VkVG91Y2hlcz9bMF0uY2xpZW50WVxuICAgIFtcbiAgICAgICh4IC0gcmVjdC5sZWZ0KSAvIHJlY3Qud2lkdGggKiBjYW52YXMud2lkdGhcbiAgICAgICh5IC0gcmVjdC50b3ApIC8gcmVjdC5oZWlnaHQgKiBjYW52YXMuaGVpZ2h0XG4gICAgXVxuXG5cbiAgZHJhd2luZyA9IGZhbHNlXG4gIGxpbmVzID0gW11cblxuICByZW5kZXIgPSAobGluZSktPlxuICAgIGN0eC5iZWdpblBhdGgoKVxuICAgIGZvciB7eDogeCx5OiB5fSBpbiBsaW5lXG4gICAgICBjdHgubGluZVRvKHgseSlcbiAgICBjdHguc3Ryb2tlKClcbiAgICBjdHguY2xvc2VQYXRoKClcblxuICBtb3ZlID0gKGUpLT5cbiAgICByZXR1cm4gdW5sZXNzIGRyYXdpbmdcbiAgICBlLnByZXZlbnREZWZhdWx0KClcbiAgICBbeCx5XSA9IG1vdXNlQ29vcmRzKHRoaXMsIGUpXG5cbiAgICBjdXJyZW50TGluZSA9IGxpbmVzW2xpbmVzLmxlbmd0aCAtIDFdXG4gICAgY3VycmVudExpbmUucHVzaCB7eDogeCx5OiB5fVxuXG4gICAgcmVuZGVyKGN1cnJlbnRMaW5lKVxuXG5cbiAgc3RhcnQgPSAoKS0+XG4gICAgZHJhd2luZyA9IHRydWVcbiAgICBsaW5lcy5wdXNoIFtdXG5cbiAgc3RvcCA9ICgpLT5cbiAgICBkcmF3aW5nID0gZmFsc2VcbiAgICBjdXJyZW50TGluZSA9IGxpbmVzW2xpbmVzLmxlbmd0aCAtIDFdXG4gICAgY3VycmVudExpbmUucHVzaCBjdXJyZW50TGluZVswXVxuICAgIGxpbmVzW2xpbmVzLmxlbmd0aCAtIDFdID0gc2ltcGxpZnkgY3VycmVudExpbmUsIDVcblxuICAgIGN0eC5jbGVhclJlY3QoMCwgMCwgY2FudmFzLndpZHRoLCBjYW52YXMuaGVpZ2h0KVxuICAgIGZvciBsaW5lIGluIGxpbmVzXG4gICAgICByZW5kZXIobGluZSlcblxuXG4gIGNhbnZhcy5hZGRFdmVudExpc3RlbmVyICdtb3VzZW1vdmUnLCBtb3ZlLCBmYWxzZVxuICBjYW52YXMuYWRkRXZlbnRMaXN0ZW5lciAndG91Y2htb3ZlJywgbW92ZSwgZmFsc2VcbiAgY2FudmFzLmFkZEV2ZW50TGlzdGVuZXIgJ21vdXNlZG93bicsIHN0YXJ0XG4gIGNhbnZhcy5hZGRFdmVudExpc3RlbmVyICd0b3VjaHN0YXJ0Jywgc3RhcnRcbiAgY2FudmFzLmFkZEV2ZW50TGlzdGVuZXIgJ21vdXNldXAnLHN0b3BcbiAgY2FudmFzLmFkZEV2ZW50TGlzdGVuZXIgJ3RvdWNoZW5kJywgc3RvcFxuIl19
//# sourceURL=coffeescript

Comments