Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.2/paper-full.js"></script>
</head>
<body>
  <input id="url" type="text" placeholder="画像URLを貼付">
  <input id="file" type="file" accept="image/*">
  <div id="view">
    <div id="draw">
      <canvas id="img"></canvas>
      <script type="text/paperscript" canvas="pen">
        var hitOptions = Object.seal({
          segments: true,
          stroke: false,
          fill: false,
          tolerance: 10
        });
        var path = null;
        function onMouseDown(e) {
          var hitSeg = project.hitTest(e.point.clone(), hitOptions);
          var isClose = path != null
              && path.segments.length > 2
              && hitSeg
              && hitSeg.type === 'segment'
              && hitSeg.item.firstSegment === hitSeg.segment;
          if (isClose) {
            path.closed = true;
            path = null;
            return false;
          }
          if (path == null) {
            path = new Path();
            path.selected = true;
            path.add(e.point);
          }
          else {
            path.add(e.point);
          }
        } 
      </script>
      <canvas id="pen" width="720" height="600"></canvas>
    </div>
    <button id="reset">リセット</button>
  </div>
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers