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. What is a simple canvas drawing -- simplified lines How do you make a simple canvas drawing -- simplified lines? This script and codes were developed by Anand Thakker on 24 February 2022, Thursday.

How do I make an simple canvas drawing -- simplified lines?
  1. Simple canvas drawing -- simplified lines Previews
  2. Simple canvas drawing -- simplified lines HTML Codes
  3. Simple canvas drawing -- simplified lines CSS Codes
  4. Simple canvas drawing -- simplified lines JS Codes
Simple canvas drawing -- simplified lines Previews

Simple canvas drawing -- simplified lines HTML Codes

<!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>

Simple canvas drawing -- simplified lines CSS Codes

canvas {
  border: 1px solid gray;
  max-width: 100%;
}

Simple canvas drawing -- simplified lines JS Codes

(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);
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.