clipping test

trying to boolean a raster with paper.js

by Nick Hulea

HTML

<script src="http://cdn.eyahuska.com/paper.js"></script>
<div id="container">
    <canvas id="myCanvas" resize></canvas>
</div>
<script type="text/paperscript" canvas="myCanvas">
    var viewportWidth  = document.documentElement.clientWidth
    , viewportHeight = document.documentElement.clientHeight;
    
    var star = new Path.Rectangle({
        center: view.center,
        size: [viewportWidth, viewportHeight],
        fillColor: 'red'
    });

    var circle = new Path.Circle({
        center: view.center,
        radius: 50,
        strokeColor: 'black'
    });

    // Create a group of the two items and clip it:
    var group = new Group(circle, star);
    group.clipped = true;

    // Lets animate the circle:
    function onFrame(event) {
        var offset = Math.sin(event.count / 30) * 30;
        circle.position.x = view.center.x + offset;
    }
</script>