This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 10169 - The discontinuity at shadowBlur = 8 here is weird. We have no interop on exact shadow algorithms right now anyway, so maybe it could be fixed in the spec? Clearly authors aren't depending on pixel-perfect canvas shadows. Maybe it should just be the num
Summary: The discontinuity at shadowBlur = 8 here is weird. We have no interop on exa...
Status: CLOSED INVALID
Alias: None
Product: HTML WG
Classification: Unclassified
Component: pre-LC1 HTML Canvas 2D Context (editor: Ian Hickson) (show other bugs)
Version: unspecified
Hardware: Other other
: P3 normal
Target Milestone: ---
Assignee: Ian 'Hixie' Hickson
QA Contact: HTML WG Bugzilla archive list
URL: http://www.whatwg.org/specs/web-apps/...
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2010-07-14 20:55 UTC by contributor
Modified: 2010-10-05 12:58 UTC (History)
4 users (show)

See Also:

Attachments

Description contributor 2010-07-14 20:55:20 UTC 
Section: http://www.whatwg.org/specs/web-apps/current-work/complete.html#shadows

Comment:
The discontinuity at shadowBlur = 8 here is weird.  We have no interop on
exact shadow algorithms right now anyway, so maybe it could be fixed in the
spec?  Clearly authors aren't depending on pixel-perfect canvas shadows. 
Maybe it should just be the number of standard deviations, since that's what
SVG does?

Posted from: 68.175.61.233
Comment 1 Aryeh Gregor 2010-07-14 21:01:17 UTC 
Document showing lack of interop:

data:text/html,<!doctype html>
<canvas height="300" width="300"></canvas>
<script>
window.addEventListener('load', function () {
context = document.getElementsByTagName("canvas")[0].getContext("2d");
context.shadowBlur = 50;
context.shadowColor = 'black';
context.fillRect(100, 100, 100, 100); }, false);
</script>

This looks distinctly different in fairly recent WebKit, Gecko, and Presto (Chrome dev, Firefox 4b1, Opera 10.60).  From reading the specs, not knowing anything about Gaussian blurs, I'd think it should look the same as:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"><defs>
<filter id="Gaussian_Blur"><feGaussianBlur in="SourceGraphic" stdDeviation="5"/></filter>
</defs>
<rect x="100" y="100" width="100" height="100" style="fill:black;filter:url(#Gaussian_Blur)"/>
</svg>

which Chrome and Opera render identically to one another, but very different to how they render the canvas.  So it should be safe to change the algorithm here substantially.  Although probably not to the point of matching SVG, on second thought, since that's very different from what anyone does now for canvas (by an order of magnitude in this case).
Comment 2 Aryeh Gregor 2010-07-14 21:14:53 UTC 
Er, my canvas example was wrong.  This should display identically to the SVG I gave:

data:text/html,<!doctype html>
<style>* { margin: 0 }</style>
<canvas height="300" width="300"></canvas>
<script>
window.addEventListener('load', function () {
context = document.getElementsByTagName("canvas")[0].getContext("2d");
context.shadowBlur = 12.5;
context.shadowOffsetX = 400;
context.shadowOffsetY = 400;
context.shadowColor = 'black';
context.fillRect(-300, -300, 100, 100);
}, false);
</script>

It does in Opera, but Chrome isn't quite right.  Either way, they all disagree on the canvas rendering, no interop.
Comment 3 Aryeh Gregor 2010-07-14 23:59:13 UTC 
Safari 5, IE9PP2, and Opera 10.60 all agree on the canvas rendering on Windows 7, actually, per spec.  But Firefox+Chrome is a much bigger market share than that (since IE<9 is out of the picture), so it's still not dependable in practice.
Comment 4 Aryeh Gregor 2010-07-15 09:57:36 UTC 
Hixie recommended that I bring this up with browser vendors instead of him, so I'll do that.