Bug 18212 - REGRESSION: Canvas rendering changes between Safari and Nightlies
Summary: REGRESSION: Canvas rendering changes between Safari and Nightlies
Alias: None
Product: WebKit
Classification: Unclassified
Component: DOM (show other bugs)
Version: 528+ (Nightly build)
Hardware: Macintosh OS X 10.5
: P1 Normal
Assignee: Nobody
URL: http://appkainime.bouniol.homeip.net/
Keywords: InRadar, NeedsReduction, Regression
Depends on:
Reported: 2008-03-29 17:44 PDT by Dimitri Bouniol
Modified: 2012-06-25 15:47 PDT (History)
6 users (show)

See Also:

Difference between Safari and Nightly Renderings (31.11 KB, image/png)
2008-03-29 19:22 PDT, Dimitri Bouniol
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Dimitri Bouniol 2008-03-29 17:44:28 PDT
I am using a canvas to render images at a perspective on my site by rendering each line of pixels at a different scale.
The canvas object is all the icons that appear at the top of the page in the grey bar.
In Safari (3.1 and below), everything renders quickly and looks normal, but in recent Nightly builds, rendering time is significantly increased and rendering looks very bizarre.
I think it has something to do with drawing and scaling images using transforming methods, but I'm not sure.

Site: http://appkainime.bouniol.homeip.net/
Javascript: http://appkainime.bouniol.homeip.net/js/master.js

Methods of interest:

- drawAppFlow()
Calls drawInContextWithPerspectiveAndArg several times at different positions with each image to be drawn at a perspective.

- drawInContextWithPerspectiveAndArg(drawFunction, ctx, x, y, z, width, height, arg)
Draws the drawFunction(ctx, arg) in the context ctx using the one-point perspective at (x, y, z), by calling drawFunction(ctx, arg) for every vertical pixel line, then clip, scale, and apply shading to the result accordingly so a perspective is acheived.
drawFunction is always drawImage(ctx, image)
arg is an Image object to be passed to drawImage

- drawImage(ctx, image)
Draws the image in the context ctx with a shadow, or if the image is not yet loaded, draws a grey box instead.

In the meantime, I'm going to try to shorten the code down as much as possible and get a test case of the issue.
Comment 1 Dimitri Bouniol 2008-03-29 19:22:42 PDT
Created attachment 20205 [details]
Difference between Safari and Nightly Renderings


I've made a test case and I think I've narrowed it down to a problem linked to the clip() (and possibly rect()) function(s).
The test is made of two canvases, one clipping each vertical line before it is drawn, and the other doing so afterwards.

In nightly (left) and safari (right), the rendering is the same for clipping after drawing, and has a large shadow bleed, in the second canvas (the one on the right in each browser).
For the first canvas (the one on the left in each browser) however, when the clip occurs before drawing, the unwanted bleed is only present in nightly (left).

The second row shows the rendered image drawn with only drawImage and a shadow.

The third row shows each vertical line separated by 1 pixel. On safari (right), the first canvas (clip before drawing) correctly separates every line, but in every other case in both safari and webkit, the first line seems to be repeated several times before the rest of the image comes.
Comment 2 Oliver Hunt 2008-06-28 02:56:57 PDT
Erk, Dimitri I just looked at this now and the test case is no longer available -- could you attach a copy to the bug? (or better yet say that it has magically fixed itself in the latest nightlies :D )
Comment 3 Dimitri Bouniol 2008-06-30 17:09:53 PDT
Link fixed, but unfortunately it has not fixed itself in the latest nightlies :(
Hope you can fix it :)
Comment 4 Gavin Sherlock 2009-05-02 13:33:24 PDT
I still see a difference between r42858 and 3.2.1
Comment 5 Alexey Proskuryakov 2009-05-02 22:20:45 PDT
Comment 6 mitz 2009-05-03 14:50:47 PDT
I looked at the test case in TOT, in Safari 3.1.1 and in Firefox. If I turn off shadows, then the TOT rendering resembles Firefox.

Can you clarify what this bug is about? Is it about how shadows are rendered under transforms? Is it about how they are rendered under clipping? Can you make a smaller reduction that demonstrates just the thing that has changed? Thanks!
Comment 7 timmywil 2011-06-02 10:15:16 PDT
On Chromium 13.0.779.0 (87016), drawImage does not work

test case: http://jsfiddle.net/timmywil/9HtNy/5/
Comment 8 Elliott Sprehn 2012-06-25 15:40:59 PDT
Dimitri, does this still reproduce?
Comment 9 Dimitri Bouniol 2012-06-25 15:45:55 PDT
I no longer have the original files, so there is no way for me to check unfortunately. I'm sure that after 4 years the safari of the time became the nightly version of the time anyways, so there's little chance that it is still relevant :)