Using a mask to create a raster

[Robert Gordon]

Hey gang,

Just found Paper.js and I'm really liking it. My big issue right now has to do with performance on mobile browsers when using a clip mask within a group. It works great on the desktop, but is super-sluggish in iOS (even on an iPad 3). One solution (that I don't believe exists in the product yet) would be to be able to create a raster using a mask (not rendered with a live mask - if you see what I mean). Many of us coming from Flash have used a similar technique (converting vectors to bitmaps at runtime) to squeeze performance where we need it (actually, in more recent Flash builds, cacheasbitmap somewhat automates this functionality).

So - perhaps this is best submitted as a feature request…being able to render bitmaps using vector masks generated at runtime.

Thanks!

r o b

[Robert Gordon]

UPDATE: I was able to solve this outside of Paper.js through the use of canvas's globalCompositeOperation (you can layer in a context with masking effects).

Cheers!

r o b

[Jürg Lehni]

FYI: Paper.js gives access to globalCompositeOperation options through item.blendMode

Best,

J

> --
> You received this message because you are subscribed to the Google Groups "Paper.js" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.
> For more options, visit https://groups.google.com/groups/opt_out.

[Robert Gordon]

Hi Jurg,

Yes - I did notice this, but was at a bit of a loss for how to implement.

I'm trying to divide a single large image up into a bunch of smaller ones, with some bevel effects (think jigsaw pieces).

Here's what I'm doing:

// a new raster with the right dimensions

targetRaster = new Raster('empty');

ctx = targetRaster.getContext();

// doing this because I can't get getSubRaster() to work

data = sourceRaster.getImageData(g_rect);

targetRaster.setImageData(data, g_point);

// the 'light' part of the bevel

ctx.globalCompositeOperation = 'lighter';

ctx.drawImage(strokeRaster.canvas, 0, 1);

// the 'dark' part of the bevel

ctx.globalCompositeOperation = 'source-atop';

ctx.drawImage(strokeDkRaster.canvas, 0, 0);

// the mask of the piece shape

ctx.globalCompositeOperation = 'destination-in';

ctx.drawImage(maskRaster.canvas, 0, 0);

return targetRaster;

Would any of the above be better accomplished using items and blendModes?

Also - is there a way to create a 'blank' Raster of a certain size without having a source image?

Cheers,

r o b