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 lang="en">
​
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>test</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.2/paper-full.min.js"></script>
    </head>
​
    <body>
        <script type="text/paperscript" canvas="cnv">
            var raster = new Raster({
                source: 'http://assets.paperjs.org/images/marilyn.jpg',
                crossOrigin: 'anonymous',
                position: view.center,
                visible: false
            })
            
            raster.onLoad = function () { 
                this.canvas.getContext('2d')
                this.drawImage(this.canvas, 0, 0)
                this.visible = true
            }
            
            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="cnv" width="400" height="400"></canvas>
        <br>
        <input type="range"></canvas>
    </body>
​
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers