Paperjs rasterize activeLayer with bounds from view

Question

I've got this fiddle, where I'd like to achieve sort of rasterized thumbnail of canvas view. Everything works ok until some paths overflow view bounds and those overflowed parts also get exported into thumbnail, what is not desired. Only parts that are visible on canvas should be visible in thumb. I've experimented with clipMask, no success unfortunately.

html code

<canvas id="c"></canvas>
<img id="thumb" />

paperscript code

paper.install(window);
var canvas = document.getElementById('c');
paper.setup(canvas);

var style = {
    fillColor : 'black'
};
var objects = new Group();
var background = new Path.Rectangle(view.bounds);
background.fillColor = 'red';

var rect = new Path.Rectangle(-10, 20 , 40, 50);
rect.fillColor = style;
objects.addChild(rect);

var rect = new Path.Rectangle(60, -20 , 40, 50);
rect.fillColor = style;
objects.addChild(rect);

var rect = new Path.Rectangle(195, 20 , 40, 50);
rect.fillColor = style;
objects.addChild(rect);

var rect = new Path.Rectangle(60, 195 , 40, 50);
rect.fillColor = style;
objects.addChild(rect);

objects.bringToFront();
view.draw();

var data = project.activeLayer.rasterize().toDataURL();
var img = document.getElementById('thumb');
img.src = data;

Do you guys have any idea how can this be solved?

Thank you very much for any kind of help.

Answer 1

Okay, so I eventually figured it out. Needed to use getSubRaster function to crop out subraster I needed. To find out how much pixels are overflowing from top or left I used project.activeLayer.bounds.x and .y, which are negative, when overflowing from view.

If someone knows more elegant solution, please let me know.

Here's an updated fiddle