<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=us-ascii">
<META content="MSHTML 6.00.2900.3698" name=GENERATOR>
<STYLE>@font-face {
font-family: Calibri;
}
@font-face {
font-family: Tahoma;
}
@font-face {
font-family: Segoe UI;
}
@page WordSection1 {size: 8.5in 11.0in; margin: 1.0in 1.0in 1.0in 1.0in; }
P.MsoNormal {
FONT-SIZE: 11pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Calibri","sans-serif"
}
LI.MsoNormal {
FONT-SIZE: 11pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Calibri","sans-serif"
}
DIV.MsoNormal {
FONT-SIZE: 11pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Calibri","sans-serif"
}
A:link {
COLOR: blue; TEXT-DECORATION: underline; mso-style-priority: 99
}
SPAN.MsoHyperlink {
COLOR: blue; TEXT-DECORATION: underline; mso-style-priority: 99
}
A:visited {
COLOR: purple; TEXT-DECORATION: underline; mso-style-priority: 99
}
SPAN.MsoHyperlinkFollowed {
COLOR: purple; TEXT-DECORATION: underline; mso-style-priority: 99
}
P.MsoPlainText {
FONT-SIZE: 11pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Calibri","sans-serif"; mso-style-priority: 99; mso-style-link: "Plain Text Char"
}
LI.MsoPlainText {
FONT-SIZE: 11pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Calibri","sans-serif"; mso-style-priority: 99; mso-style-link: "Plain Text Char"
}
DIV.MsoPlainText {
FONT-SIZE: 11pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Calibri","sans-serif"; mso-style-priority: 99; mso-style-link: "Plain Text Char"
}
SPAN.PlainTextChar {
FONT-FAMILY: "Calibri","sans-serif"; mso-style-priority: 99; mso-style-link: "Plain Text"; mso-style-name: "Plain Text Char"
}
SPAN.EmailStyle19 {
COLOR: windowtext; FONT-FAMILY: "Segoe UI","sans-serif"; mso-style-type: personal
}
SPAN.EmailStyle20 {
FONT-WEIGHT: normal; COLOR: #1f497d; FONT-STYLE: normal; FONT-FAMILY: "Segoe UI","sans-serif"; mso-style-type: personal-reply
}
.MsoChpDefault {
FONT-SIZE: 10pt; mso-style-type: export-only
}
DIV.WordSection1 {
page: WordSection1
}
</STYLE>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]--></HEAD>
<BODY text=#000000 bgColor=#ffffff>
<DIV dir=ltr align=left><SPAN class=870351118-03012011><FONT face=Arial
color=#0000ff size=2>I thought that the issue was settled as well, but after
talking to Ian Hixie and Philip Taylor, Ian indicated that if someone provides a
clear formulation of the spec text that matches webkit behavior, the spec would
likely be changed to match that.</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=870351118-03012011><FONT face=Arial
color=#0000ff size=2>I have proposed the changes below, but got no reply (or if
I got any I missed them):</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=870351118-03012011><SPAN lang=EN>
<P>TML5 - Canvas.</P>
<P>I have read this thread (from and of July 2010) and I happen to agree that
the Safari/Chromium implementation is more intuitive, and likely less expensive
to implement, therefore I offer these 2 proposals for changing the spec's
Drawing model section to match what I perceive to be the preference of most
people in that discussion.</P>
<P>Of note: According to the current Drawing model, an opaque shape's shadow
would be erased as part of step 6 when drawn with source-in composite Mode if
globalAlpha is 1, which is probably not the intended behavior.</P>
<P>Version 1:</P>
<P>4.8.11.1.13 Drawing model</P>
<P><FONT face=Arial color=#0000ff size=2></FONT> </P>
<P>When a shape or image is painted, user agents must follow these steps, in the
order given (or act as if they do):</P>
<P>1. Render the shape or image onto an infinite transparent black bitmap,
creating image M1, as described in the previous sections except that for the
purpose of this step every pixel of the image will be considered to be fully
opaque white and the current fillStyle will be considered to be solid fully
opaque white and the strokeStyle will be considered fullyOpaque white as
well.</P>
<P>2. When shadows are drawn, render the shadow from image M1, using a fully
opaque white shadow color as described in the shadows section, creating image
M2.</P>
<P>3. Let C1 be a region obtained by intersecting the canvas's cliping region
with the set of pixels in the canvas that correspond to pixels in M1 (by having
the same coordinates) that are not fully transparent.</P>
<P>4. Let C2 be a region obtained by intersecting the canvas's cliping region
with the set of pixels in the canvas that correspond to pixels in M2 (by having
the same coordinates) that are not fully transparent.</P>
<P>5. Render the shape or image onto an infinite transparent black bitmap,
creating image A, as described in the previous sections. For shapes, the current
fill, stroke, and line styles must be honored, and the stroke must itself also
be subjected to the current transformation matrix.</P>
<P>6. When shadows are drawn, render the shadow from image A, using the current
shadow styles, creating image B.</P>
<P>7. When shadows are drawn, multiply the alpha component of every pixel in B
by globalAlpha.</P>
<P>8. When shadows are drawn, composite B with the current canvas bitmap,
cliping results to region C2 defined above, using the current composition
operator.</P>
<P>9. Multiply the alpha component of every pixel in A by globalAlpha.</P>
<P>10. Composite A with the current canvas bitmap, cliping results to region C1
defined above, using the current composition operator. </P>
<P><FONT face=Arial color=#0000ff size=2></FONT> </P>
<P>Version 2:</P>
<P>4.8.11.1.13 Drawing model</P>
<P><FONT face=Arial color=#0000ff size=2></FONT> </P>
<P>When a shape or image is painted, user agents must follow these steps, in the
order given (or act as if they do):</P>
<P>1. Render the shape or image onto an infinite transparent black bitmap,
creating image A, as described in the previous sections. For shapes, the current
fill, stroke, and line styles must be honored, and the stroke must itself also
be subjected to the current transformation matrix.</P>
<P>2. When shadows are drawn, render the shadow from image A, using the current
shadow styles, creating image B.</P>
<P>3. When shadows are drawn, multiply the alpha component of every pixel in B
by globalAlpha.</P>
<P>4. When shadows are drawn, composite, using the current composition operator,
B with the current canvas bitmap, cliping results to the cliping region of the
canvas and to the pixels that would have taken the shadow's color if the
composition operator would have been source-over and the shadow would have been
fully opaque and the globalAlpha would have been 1.</P>
<P>5. Multiply the alpha component of every pixel in A by globalAlpha.</P>
<P>6. Composite, using the current composition operator, A with the current
canvas bitmap, cliping results to the cliping region of the canvas and to the
pixels that would have taken the shape's or image's pixel color if the
composition operator would have been source-over and the image would have been
fully opaque, the fillStyle and strokeStyle would have been a solid fully opaque
color, and the globalAlpha would have been 1. </P>
<P> </P>
<P>I also suggest, this change to section 4.8.11.1.3 Compositing:</P>
<P>Instead of:</P>
<P>The operators in the above list must be treated as described by the
Porter-Duff operator given at the start of their description (e.g. A over B).
They are to be applied as part of the drawing model, at which point the clipping
region is also applied. (Without a clipping region, these operators act on the
whole bitmap with every operation.) [PORTERDUFF]</P>
<P>Say:</P>
<P>The operators in the above list must be treated as described by the
Porter-Duff operator [PORTERDUFF] given at the start of their description (e.g.
A over B). They are to be applied as part of the drawing model, which also
defines the pixels in the canvas that are to be composited.</P>
<P><FONT face=Arial color=#0000ff
size=2></FONT> </P></SPAN></SPAN></DIV><BR>
<BLOCKQUOTE dir=ltr
style="PADDING-LEFT: 5px; MARGIN-LEFT: 5px; BORDER-LEFT: #0000ff 2px solid; MARGIN-RIGHT: 0px">
<DIV class=OutlookMessageHeader lang=en-us dir=ltr align=left>
<HR tabIndex=-1>
<FONT face=Tahoma size=2><B>From:</B> whatwg-bounces@lists.whatwg.org
[mailto:whatwg-bounces@lists.whatwg.org] <B>On Behalf Of </B>ext Charles
Pritchard<BR><B>Sent:</B> Friday, December 31, 2010 8:20 PM<BR><B>To:</B>
whatwg<BR><B>Subject:</B> [whatwg] Fwd: RE: Inconsistent behaviour of
globalCompositeOperation property<BR></FONT><BR></DIV>
<DIV></DIV>Implementation issues with the Drawing Model [1] have been floating
around for some time.<BR>For whatever reasons, Microsoft is not willing to
publicly discuss their issue with the spec,<BR>beyond the scant details listed
below.<BR><BR>That's fine and all.. I'm bringing it to the WHATWG's attention
because it seems to me<BR>like some of the confusion could be avoided were a
"standard" PNG photo available,<BR>demonstrating proper behavior.<BR><BR>I
thought this issue was resolved some time ago, but it keeps coming up.<BR>I
don't fault anyone, it's a very subtle part of the spec.<BR><BR>This reference
image helped me communicate with Robert (Mozilla) last year, about the drawing
model section.<BR>Screen cap:<BR><A class=moz-txt-link-freetext
href="http://imgur.com/zUu66.png">http://imgur.com/zUu66.png</A> <BR>Generated
from:<BR><A class=moz-txt-link-freetext
href="https://developer.mozilla.org/en/Canvas_tutorial/Compositing">https://developer.mozilla.org/en/Canvas_tutorial/Compositing</A>
<BR>Thread:<BR><A class=moz-txt-link-freetext
href="http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-December/024316.html">http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-December/024316.html</A>
<BR><BR>There seems to still be some disagreement over composting:<BR><A
class=moz-txt-link-freetext
href="https://bugs.webkit.org/show_bug.cgi?id=39177">https://bugs.webkit.org/show_bug.cgi?id=39177</A>
<BR><BR>I thought we had a handle on this, following some slight changes to
the spec by Ian:<BR><A class=moz-txt-link-freetext
href="http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-October/023706.html">http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-October/023706.html</A>
<BR><BR>Apparently it's not handled yet.<BR><BR>Sending out a flare, hoping
that we can get this issue put to rest before the next round<BR>of major
releases.<BR><BR><BR>-Charles<BR><BR>Below are the only public comments I'm
aware of, that MS has posted on the issue:<BR><A class=moz-txt-link-freetext
href="http://lists.w3.org/Archives/Public/public-canvas-api/2010OctDec/0070.html">http://lists.w3.org/Archives/Public/public-canvas-api/2010OctDec/0070.html</A>
<BR>Earlier thread... <BR><A class=moz-txt-link-freetext
href="http://lists.w3.org/Archives/Public/public-canvas-api/2010AprJun/0046.html">http://lists.w3.org/Archives/Public/public-canvas-api/2010AprJun/0046.html</A>
<BR><BR>These comments lack the detail necessary to provide feedback.
<BR><BR><BR>-------- Original Message --------
<TABLE class=moz-email-headers-table cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TH vAlign=baseline noWrap align=right>Subject: </TH>
<TD>RE: Inconsistent behaviour of globalCompositeOperation
property</TD></TR>
<TR>
<TH vAlign=baseline noWrap align=right>Resent-Date: </TH>
<TD>Wed, 15 Dec 2010 23:47:24 +0000</TD></TR>
<TR>
<TH vAlign=baseline noWrap align=right>Resent-From: </TH>
<TD><A class=moz-txt-link-abbreviated
href="mailto:public-canvas-api@w3.org">public-canvas-api@w3.org</A></TD></TR>
<TR>
<TH vAlign=baseline noWrap align=right>Date: </TH>
<TD>Wed, 15 Dec 2010 23:45:39 +0000</TD></TR>
<TR>
<TH vAlign=baseline noWrap align=right>From: </TH>
<TD>Jatinder Mann <A class=moz-txt-link-rfc2396E
href="mailto:jmann@microsoft.com"><jmann@microsoft.com></A></TD></TR>
<TR>
<TH vAlign=baseline noWrap align=right>To: </TH>
<TD><A class=moz-txt-link-abbreviated
href="mailto:public-canvas-api@w3.org">public-canvas-api@w3.org</A> <A
class=moz-txt-link-rfc2396E
href="mailto:public-canvas-api@w3.org"><public-canvas-api@w3.org></A></TD></TR></TBODY></TABLE><BR><BR>
<META content="Microsoft Word 14 (filtered medium)" name=Generator>
<STYLE>@font-face {
font-family: Calibri;
}
@font-face {
font-family: Tahoma;
}
@font-face {
font-family: Segoe UI;
}
@page WordSection1 {size: 8.5in 11.0in; margin: 1.0in 1.0in 1.0in 1.0in; }
P.MsoNormal {
FONT-SIZE: 11pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Calibri","sans-serif"
}
LI.MsoNormal {
FONT-SIZE: 11pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Calibri","sans-serif"
}
DIV.MsoNormal {
FONT-SIZE: 11pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Calibri","sans-serif"
}
A:link {
COLOR: blue; TEXT-DECORATION: underline; mso-style-priority: 99
}
SPAN.MsoHyperlink {
COLOR: blue; TEXT-DECORATION: underline; mso-style-priority: 99
}
A:visited {
COLOR: purple; TEXT-DECORATION: underline; mso-style-priority: 99
}
SPAN.MsoHyperlinkFollowed {
COLOR: purple; TEXT-DECORATION: underline; mso-style-priority: 99
}
P.MsoPlainText {
FONT-SIZE: 11pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Calibri","sans-serif"; mso-style-priority: 99; mso-style-link: "Plain Text Char"
}
LI.MsoPlainText {
FONT-SIZE: 11pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Calibri","sans-serif"; mso-style-priority: 99; mso-style-link: "Plain Text Char"
}
DIV.MsoPlainText {
FONT-SIZE: 11pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Calibri","sans-serif"; mso-style-priority: 99; mso-style-link: "Plain Text Char"
}
SPAN.PlainTextChar {
FONT-FAMILY: "Calibri","sans-serif"; mso-style-priority: 99; mso-style-link: "Plain Text"; mso-style-name: "Plain Text Char"
}
SPAN.EmailStyle19 {
COLOR: windowtext; FONT-FAMILY: "Segoe UI","sans-serif"; mso-style-type: personal
}
SPAN.EmailStyle20 {
FONT-WEIGHT: normal; COLOR: #1f497d; FONT-STYLE: normal; FONT-FAMILY: "Segoe UI","sans-serif"; mso-style-type: personal-reply
}
.MsoChpDefault {
FONT-SIZE: 10pt; mso-style-type: export-only
}
DIV.WordSection1 {
page: WordSection1
}
</STYLE>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
<DIV class=WordSection1>
<P class=MsoNormal><SPAN style="COLOR: black">We initially felt that the
Drawing Model [1], as written in the spec, was incorrectly defined. We have
since consulted with many graphics experts, and it appears that the spec as
written, and implemented by Firefox and Opera, is the correct definition of
Porter-Duff and composition operations, and its behavior is acceptable.
<O:P></O:P></SPAN></P>
<P class=MsoNormal style="MARGIN-LEFT: 0.5in"><SPAN
style="COLOR: black"><O:P></O:P></SPAN></P>
<P class=MsoNormal><SPAN style="COLOR: black">Thanks,<O:P></O:P></SPAN></P>
<P class=MsoNormal><SPAN style="COLOR: black">Jatinder<O:P></O:P></SPAN></P>
<P class=MsoNormal style="MARGIN-LEFT: 0.5in"><SPAN
style="COLOR: black"><O:P></O:P></SPAN></P>
<P class=MsoPlainText>[1] <A
href="http://dev.w3.org/html5/2dcontext/#drawing-model"
moz-do-not-send="true">http://dev.w3.org/html5/2dcontext/#drawing-model</A>
<O:P></O:P></P>
<P class=MsoNormal style="MARGIN-LEFT: 0.5in"><SPAN
style="COLOR: black"><O:P></O:P></SPAN></P>
<P class=MsoPlainText>Jatinder Mann | Microsoft Program Manager | <A
href="mailto:jmann@microsoft.com"
moz-do-not-send="true">jmann@microsoft.com</A><O:P></O:P></P>
<P class=MsoNormal><SPAN
style="FONT-SIZE: 10pt; COLOR: rgb(31,73,125); FONT-FAMILY: 'Segoe UI','sans-serif'"><O:P></O:P></SPAN></P>
<DIV>
<DIV
style="BORDER-RIGHT: medium none; PADDING-RIGHT: 0in; BORDER-TOP: rgb(181,196,223) 1pt solid; PADDING-LEFT: 0in; PADDING-BOTTOM: 0in; BORDER-LEFT: medium none; PADDING-TOP: 3pt; BORDER-BOTTOM: medium none">
<P class=MsoNormal><B><SPAN
style="FONT-SIZE: 10pt; FONT-FAMILY: 'Tahoma','sans-serif'">From:</SPAN></B><SPAN
style="FONT-SIZE: 10pt; FONT-FAMILY: 'Tahoma','sans-serif'"> <A
class=moz-txt-link-abbreviated
href="mailto:public-canvas-api-request@w3.org">public-canvas-api-request@w3.org</A>
[<A class=moz-txt-link-freetext
href="mailto:public-canvas-api-request@w3.org">mailto:public-canvas-api-request@w3.org</A>]
<B>On Behalf Of </B>Jatinder Mann<BR><B>Sent:</B> Tuesday, May 25, 2010 11:57
AM<BR><B>To:</B> <A class=moz-txt-link-abbreviated
href="mailto:public-canvas-api@w3.org">public-canvas-api@w3.org</A><BR><B>Subject:</B>
Inconsistent behaviour of globalCompositeOperation
property<O:P></O:P></SPAN></P></DIV></DIV>
<P class=MsoNormal><O:P></O:P></P>
<P class=MsoPlainText>As we were reviewing the globalCompositeOperation
property [1] of the Canvas 2D Context, we have noticed that there is a large
inconsistency with the way web browsers implement this
property.<O:P></O:P></P>
<P class=MsoPlainText><O:P></O:P></P>
<P class=MsoPlainText>Firefox 3.6.3 and Opera 10.5 have a similar behaviour
that matches the current version of the Canvas 2D Context spec. Chrome 4.1 and
Safari 4.0.5 behave similarly to each other, albeit differently from the spec.
Today, web developers cannot reliably use this property in designing their
webpages due to this interoperability issue. <O:P></O:P></P>
<P class=MsoPlainText><O:P></O:P></P>
<P class=MsoPlainText>We consider that the Safari implementation of the
Drawing Model makes more sense from a web developer point of view. Most of the
Canvas APIs are applied to the next primitive being drawn. However, the
clipping behavior, as defined in the current Drawing Model [2], affects the
current contents of the Canvas outside of the current primitive being drawn.
The Safari Drawing Model calls for the clipping region to only affect the
current primitive being drawn. <O:P></O:P></P>
<P class=MsoPlainText><O:P></O:P></P>
<P class=MsoPlainText>We recommend updating the spec to match the Safari
Drawing Model. We would like to discuss this area in more
detail.<O:P></O:P></P>
<P class=MsoPlainText><O:P></O:P></P>
<P class=MsoPlainText>Thank you,<O:P></O:P></P>
<P class=MsoPlainText>Jatinder<O:P></O:P></P>
<P class=MsoPlainText><O:P></O:P></P>
<P class=MsoPlainText>[1] <A
href="http://dev.w3.org/html5/2dcontext/#compositing"
moz-do-not-send="true">http://dev.w3.org/html5/2dcontext/#compositing</A>
<O:P></O:P></P>
<P class=MsoPlainText>[2] <A
href="http://dev.w3.org/html5/2dcontext/#drawing-model"
moz-do-not-send="true">http://dev.w3.org/html5/2dcontext/#drawing-model</A>
<O:P></O:P></P>
<P class=MsoPlainText><O:P></O:P></P>
<P class=MsoPlainText>Jatinder Mann | Microsoft Program Manager | <A
href="mailto:jmann@microsoft.com"
moz-do-not-send="true">jmann@microsoft.com</A><O:P></O:P></P>
<P class=MsoNormal><O:P></O:P></P></DIV></BLOCKQUOTE></BODY></HTML>