860236 - Canvas 2D: Incorrect text rendering with changed globalCompositeOperation

Status: NEW

(Core :: Graphics: Canvas2D, defect)

Description

[elhsmart]

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

Steps to reproduce:

UserAgent: Mozilla/5.0 (Windows NT 5.1; rv:20.0) Gecko/20100101 Firefox/20.0

Trying to draw text inside filled rectangle on Canvas element.

I'm created little snippet of drawing, that just fill rectangle and try ti draw sample text inside it, that intersects with rectangle border and must be cropped, while globalCompositeOperation changed to "source-in". So, i'm trying to reach situation, where text seems like "inside" white rectangle block.

This is code snippet: 

ctx.save();
ctx.fillStyle = "#fff";
ctx.fillRect(10, 10, 100, 100);
ctx.restore();

ctx.globalCompositeOperation = "source-in";

ctx.font = "40px Verdana";
ctx.fillText("Text", 70, 70);

See URL below for example:
http://jsfiddle.net/WxgL3/1/



Actual results:

Text displayed as always, without any cropping.


Expected results:

Text must be cropped, when globalCompositeOperation applied.

Comment 1

[(mostly gone) XtC4UaLL [:xtc4uall]]

Attachment: Reporter's Testcase

Comment 2

[(mostly gone) XtC4UaLL [:xtc4uall]]

Confirmed with Mozilla/5.0 (Windows NT 6.1; WOW64; rv:23.0) Gecko/20130412 Firefox/23.0 ID:20130412030828 CSet: 7b8ed29c6bc0.

FWIW, Firefox behaves as MSIE 10/Opera.

Comment 3

[ondra zara]

The same situation in FF27 @ Linux. No non-standard globalCompositeOperations are applied to text.