Rik Cabanier Reporter
	Description • 12 years ago

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.101 Safari/537.11

Steps to reproduce:

Currently, there is no support for alpha or luminosity masking in canvas.
This makes it almost impossible to efficiently implement soft masks for pdf.js.

I found several people that provided workaround and shims for this feature.

	Rik Cabanier Reporter
	Comment 2 • 12 years ago

I attached an example implementation that will only work with the CG backend.

the proposed API is as follows:
   void mask(CanvasImageSource image, 
                     unrestricted double sx, unrestricted double sy, unrestricted double sw, unrestricted double sh, 
                     unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);

the first parameter points to an image source
sx, sy, sw, and sh point to a rectangle in the source image that you want to use as a mask
dx, dy, dw and dh point to the destination area that you want the mask to apply to.

The API currently converts colors+alpha to luminosity so the pdf.js people can play with this.
white = use the foreground colors
black = use the background colors

	Rik Cabanier Reporter
	Comment 3 • 12 years ago

The mask is also part of the graphics state, so it will respond to save/restore.

jsfiddle example: http://jsfiddle.net/NDYV8/11/

	Rik Cabanier Reporter
	Comment 4 • 12 years ago

Comment on attachment 701331 [details] [diff] [review]
Example implementation for Core Graphics

Maybe 'maskImage' is a better API

	Boris Zbarsky [:bzbarsky]
	Comment 5 • 12 years ago

Comment on attachment 701331 [details] [diff] [review]
Example implementation for Core Graphics

Going to punt this to someone who knows graphics things.  ;)

	Brendan Dahl [:bdahl]
	Comment 6 • 12 years ago

Rik,
I'll hopefully have time to play with this later today or tomorrow to see if it would meet pdf.js needs.

	Rik Cabanier Reporter
	Comment 7 • 12 years ago

Great!
I think it will need 2 more parameters to cover all the bases (cliptomask and invert) but you should be able to experiment as-is.

	Brendan Dahl [:bdahl]
	Comment 8 • 12 years ago

I think something may be screwy with blending the source and backdrop with blend modes.  I hacked up pdf.js to use mask at https://github.com/brendandahl/pdf.js/commit/765a421df04499afc14b5bcbeab0856e160a18b3 ). Using the example pdf from http://bugs.ghostscript.com/attachment.cgi?id=4177 I get the attached result.  If I comment out the blending modes code in pdf.js I can see the blue squares drawn, but with blending modes on it seems it is not blending the colors where the backdrop is empty (only where the orange circle is).

I can try to come up with a simpler example that doesn't use pdf.js, but if you have any ideas let me know.

	Rik Cabanier Reporter
	Comment 10 • 12 years ago

it looks fine to me.
I wonder what the stuff at the bottom is though...

	Brendan Dahl [:bdahl]
	Comment 11 • 12 years ago

(In reply to Rik Cabanier from comment #9)
> Created attachment 702608 [details]
> my screen shot

Looks like you don't have the blending modes turned on.  Compare the pdf to acrobat and you'll see that there shouldn't be any blue over the orange circle.

(In reply to Rik Cabanier from comment #10)
> it looks fine to me.
> I wonder what the stuff at the bottom is though...

That's the soft mask, I just added it for debugging purposes to see it.

	Rik Cabanier Reporter
	Comment 12 • 12 years ago

Not sure what you're seeing.
There's blue over the circle in acrobat too... See screenshot

	Brendan Dahl [:bdahl]
	Comment 13 • 12 years ago

Sorry about that I linked to the wrong pdf in that bug it should be http://bugs.ghostscript.com/attachment.cgi?id=4358

	Rik Cabanier Reporter
	Comment 14 • 12 years ago

(In reply to Brendan Dahl from comment #13)
> Sorry about that I linked to the wrong pdf in that bug it should be
> http://bugs.ghostscript.com/attachment.cgi?id=4358

Are you executing the form in its own canvas context?
From what I can tell, you execute it in the same context so the first gstate blows the blend mode away.
Execute the form in its own state and its own temporary canvas and then do a drawimage with the result.

	Brendan Dahl [:bdahl]
	Comment 15 • 12 years ago

I am drawing the form/soft mask to a separate canvas (https://github.com/brendandahl/pdf.js/commit/765a421df04499afc14b5bcbeab0856e160a18b3#L0R1477).

The issue I found out was from the pdf.js viewer filling the page with white before we rendered it (https://github.com/mozilla/pdf.js/blob/master/web/viewer.js#L2053). Since the blend mode was screen, white remained white.  Once I removed that everything looks as expected.

I'll play around with adding transparency groups next.  I still need to copy over the state of the current canvas to the form canvas since according to the spec it is suppose to inherit all the graphics state except blend mode, soft mask, and alpha constant.

	Brendan Dahl [:bdahl]
	Comment 16 • 12 years ago

What are you thoughts on creating a function to clear or remove the mask?  It seems kind of clunky right now to have to create new empty mask or having to use save/restore.

	Rik Cabanier Reporter
	Comment 17 • 12 years ago

the transparency group itself also need to be put in its own temporary canvas

	Rik Cabanier Reporter
	Comment 18 • 12 years ago

> The issue I found out was from the pdf.js viewer filling the page with white
> before we rendered it
> (https://github.com/mozilla/pdf.js/blob/master/web/viewer.js#L2053). Since
> the blend mode was screen, white remained white.  Once I removed that
> everything looks as expected.
> 
yes, matting is done as the last step

	Rik Cabanier Reporter
	Comment 19 • 12 years ago

(In reply to Brendan Dahl from comment #16)
> What are you thoughts on creating a function to clear or remove the mask? 
> It seems kind of clunky right now to have to create new empty mask or having
> to use save/restore.

I think that sounds reasonable.
do you have suggestions for the syntax? resetMask()

	Rik Cabanier Reporter
	Comment 20 • 12 years ago

(In reply to Brendan Dahl from comment #15)
> I am drawing the form/soft mask to a separate canvas
> (https://github.com/brendandahl/pdf.js/commit/
> 765a421df04499afc14b5bcbeab0856e160a18b3#L0R1477).
> 
> The issue I found out was from the pdf.js viewer filling the page with white
> before we rendered it
> (https://github.com/mozilla/pdf.js/blob/master/web/viewer.js#L2053). Since
> the blend mode was screen, white remained white.  Once I removed that
> everything looks as expected.
> 
> I'll play around with adding transparency groups next.  I still need to copy
> over the state of the current canvas to the form canvas since according to
> the spec it is suppose to inherit all the graphics state except blend mode,
> soft mask, and alpha constant.
yes, I think that's correct.
Almost all the time, the first thing a group does is reset that all to an initial state though so if it's complex, you might want to add that later.

	Rik Cabanier Reporter
	Comment 21 • 11 years ago

I've been looking at implementing this for just canvas image sources (since the IDL compiler still doesn't support unions).
The Core Graphics implementation is complete and I'm looking at cairo next. 
What's the best way to submit this? Can I just provide a patch with my current work and then provide patches for the different backends and more image sources?

	Brendan Dahl [:bdahl]
	Comment 22 • 11 years ago

It would probably be best to post some patches so you can get feedback as you go. Also, support for unions landed a few weeks ago.

	Rik Cabanier Reporter
	Comment 23 • 11 years ago

updated implementation. Still need to add support for unions

	Chris Peterson [:cpeterson]
	Comment 24 • 10 years ago

Michael says Shumway can emulate this. Is this a dupe or dependent of other gfx work on CSS blend modes and filters for canvas?