Paper.js - convert `paperscript` to `javascript`

Question

I am trying to change this paperscript:

<script type="text/paperscript" canvas="canvas-1">
tool.minDistance = 10;
tool.maxDistance = 45;

var path;

function onMouseDown(event) {
    path = new Path();
    path.fillColor = new Color({ hue: Math.random() * 360, saturation: 1, brightness: 1 });

    path.add(event.point);
}

function onMouseDrag(event) {
    var step = event.delta / 2;
    step.angle += 90;

    var top = event.middlePoint + step;
    var bottom = event.middlePoint - step;

    path.add(top);
    path.insert(0, bottom);
    path.smooth();
}

function onMouseUp(event) {
    path.add(event.point);
    path.closed = true;
    path.smooth();
}
</script>

to a stand alone javascript like:

paper.install(window);


window.onload = function() {
paper.setup('myCanvas');

tool.minDistance = 10;
tool.maxDistance = 45;

var path;

function onMouseDown(event) {
    path = new Path();
    path.fillColor = {
        hue: Math.random() * 360,
        saturation: 1,
        brightness: 1
    };

    path.add(event.point);
}

function onMouseDrag(event) {
    var step = event.delta / 2;
    step.angle += 90;

    var top = event.middlePoint + step;
    var bottom = event.middlePoint - step;

    path.add(top);
    path.insert(0, bottom);
    path.smooth();
}

function onMouseUp(event) {
    path.add(event.point);
    path.closed = true;
    path.smooth();
}
}

it give me an error:

TypeError: undefined is not an object (evaluating 'tool.minDistance = 10')

What is tool here? I understand that I might need to declare it before I can use it. Any idea how to resolve this?

Answer 1

You need to make the global scope as outlined in the documentation :

paper.install(window);

Then get on with global defs. :

window.onload = function() {
        // Get a reference to the canvas object
        paper.setup('myCanvas');
        // In your case create tools 
        var tool = new Tool();
        tool.minDistance = 10;
        tool.maxDistance = 45;

Then continue as usual, this will set up your tools.. More can be found here.

Incidentally you've actually already done this correctly for Path(), so the same applies to Tool()

Answer 2

When I use Paper.js directly in javascript I prefer to create paper object this way:

var canvas = document.getElementById('canvas-line');
paper.setup(canvas);
// and then if you want to create some Paper.js object prefix it's name with paper
var myPath = new paper.Path();

If you want to use tool you need to decelerate it with new paper.Tool(); For example if you want to check whether path was clicked:

    var tool1 = new paper.Tool();

    var handle;
    var myPath;
    myPath.fullySelected = true;

    tool1.onMouseDown = function(event) {
        handle = null;
        // Do a hit test on path for handles:
        var hitResult = myPath.hitTest(event.point, {
            handles: true,
            fill: true,
            stroke: true,
            segments: true,
            tolerance: 2
        });

        if (hitResult) {
            if (hitResult.type == 'handle-in') {
                handle = hitResult.segment.handleIn;
            } else if (hitResult.type == 'segment') {
                handle = hitResult.segment.point;
            } else if (hitResult.type == 'handle-out') {
                handle = hitResult.segment.handleOut;
            }
        }
    }

You can find more informations about tools in here http://paperjs.org/reference/tool/