canvas inside raster

by Nick Hulea

HTML

<script src="http://files.hulea.org/paperjs-v0.9.18/dist/paper-full.js"></script>
<canvas id="myCanvas" width="300" height="300"></canvas>
<canvas id="canvas" width="500" height="500"></canvas>
<canvas id="fillPattern" width="10" height="10" style=""></canvas>
<script type="text/paperscript" canvas="canvas">
    var c = document.createElement('canvas');
    var cvs = ;
    var patternCanvas = document.getElementById('fillPattern'),
        patternCtx = patternCanvas.getContext('2d'),
        myCanvas = document.getElementById('myCanvas'),
        myCtx = myCanvas.getContext('2d'),
        pattern;

    //draw pattern
    patternCtx.strokeStyle = "blue";
    patternCtx.moveTo(0, 0);
    patternCtx.lineTo(10, 10);
    patternCtx.stroke();

    patternCtx.moveTo(0, 10);
    patternCtx.lineTo(10, 0);
    patternCtx.stroke();


    //draw rect on myCanvas
    myCtx.rect(0, 0, 170, 85);
    myCtx.fillStyle = "red";
    myCtx.fill();

    //fill rect with pattern
    pattern = myCtx.createPattern(patternCanvas, 'repeat');
    myCtx.rect(0, 0, 170, 85);
    myCtx.fillStyle = pattern;
    myCtx.fill();

    var squareImage = new Raster(patternCanvas);
    console.log(cvs);
    var path = new Path.Circle({
        position: view.center,
        radius: 100,
        fillColor: new Color(1, 0, 0),
        strokeColor: 'black',
        strokeWidth: 5
    });
    var g = new Group([path, squareImage]);
    g.clipped = true;
</script>