Simple canvas drawing -- simplified lines

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

<!DOCTYPE html>
<html >
<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/ */
canvas {
  border: 1px solid gray;
  max-width: 100%;
}
/* Downloaded from https://www.codeseek.co/ */
(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, ref, x, y;
    ctx.beginPath();
    for (i = 0, len = line.length; i < len; i++) {
      ref = line[i], x = ref.x, y = ref.y;
      ctx.lineTo(x, y);
    }
    ctx.stroke();
    return ctx.closePath();
  };

  move = function(e) {
    var currentLine, ref, x, y;
    if (!drawing) {
      return;
    }
    e.preventDefault();
    ref = mouseCoords(this, e), x = ref[0], y = ref[1];
    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);

This awesome code ( Simple canvas drawing -- simplified lines ) is write by Anand Thakker, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Anand Thakker