shadows with strokes about jcanvas HOT 6 CLOSED

I just tested your example in the jCanvas sandbox, and the results look
exactly the same on both Chrome, Firefox, Safari, and Opera. I've never
heard of SRWare Iron, and therefore I don't plan on supporting it anytime
soon.

-Caleb

On Thu, Jun 21, 2012 at 2:29 PM, dksmiffs <
[email protected]

wrote:

Caleb - strokes and shadows don't seem to play together nicely on either
Firefox or SRWare Iron. I'm emailing you screenshots (can't find a way to
upload them to github) - results differ between FF & Iron, but look the
same on both SRWare Iron 18 & 19. ~Dave

.drawArc({
 fillStyle: "white", shadowColor: "#000",
 shadowBlur: 5, shadowX: -5, shadowY: 5,
 x: 50, y: 50, radius: 30
})
.drawArc({
 fillStyle: "white", strokeStyle: "black",
 strokeWidth: 1, shadowColor: "#000",
 shadowBlur: 5, shadowX: -5, shadowY: 5,
 x: 50, y: 125, radius: 30
})
.drawArc({
 fillStyle: "white", strokeStyle: "black",
 strokeWidth: 2, shadowColor: "#000",
 shadowBlur: 5, shadowX: -5, shadowY: 5,
 x: 50, y: 200, radius: 30
})
.drawRect({
 fillStyle: "yellow", shadowColor: "grey",
 shadowBlur: 5, shadowX: 5, shadowY: 5,
 x: 90, y: 20, width: 40, height: 60,
 fromCenter: false
})
.drawRect({
 fillStyle: "yellow", strokeStyle: "black",
 strokeWidth: 1, shadowColor: "grey",
 shadowBlur: 5, shadowX: 5, shadowY: 5,
 x: 90, y: 95, width: 40, height: 60,
 fromCenter: false
})
.drawRect({
 fillStyle: "yellow", strokeStyle: "black",
 strokeWidth: 2, shadowColor: "grey",
 shadowBlur: 5, shadowX: 5, shadowY: 5,
 x: 90, y: 170, width: 40, height: 60,
 fromCenter: false
});

---

Reply to this email directly or view it on GitHub:
#21

from jcanvas.

But even on FF, notice (when I specify strokeWidth and strokeStyle) that the shadow shows through the fill of the main shape (as if the shape's fill color were partially transparent) - that's the issue. Sorry I wasn't clear.

No worries on SRWare Iron. It's just the Chrome derivative that doesn't gather personal info like Google does w/ Chrome. In general, jCanvas works awesome on it. But again, this is just another of my test platforms, this is not the crux of the issue.

from jcanvas.

Sorry about that; I just realized what the issue was.

Quite some time ago, I chose to internally fill a shape before stroking it.
I did this so the stroke width of a filled shape will measure to be exactly
what you specified. For instance, if I said the strokeWidth was 10, then
the resulting stroke would measure to be 10px in width on the screen.

This happens because the center of the stroke width lies at the edge of the
shape. Therefore, the shape's width and height is slightly masked by the
stroke. I did this because a 1px stroke (which is the default) would look
like a 1px stroke, instead of a 0.5px stroke if I stroked before filling.

Anyway, this fill-before-stroking procedure is exactly why you see this
shadow bug. Locally, I tried stroking before filling and the shadow bug
disappears completely. However, such a radical change to jCanvas's drawing
behavior has the potential to break code. Well, the code wouldn't exactly
break, but any shape with a fill and a stroke will look slightly different.

Theoretically, I could double the stroke width to fix this, but then that
leaves us with the problem of a shape with a stroke and no fill, or shapes
with transparent fill styles.

What do you think?

-Caleb

On Thu, Jun 21, 2012 at 2:46 PM, dksmiffs <
[email protected]

wrote:

But even on FF, notice (when I specify strokeWidth and strokeStyle) that
the shadow shows through the fill of the main shape (as if the shape's fill
color were partially transparent) - that's the issue. Sorry I wasn't clear.

No worries on SRWare Iron. It's just the Chrome derivative that doesn't
gather personal info like Google does w/ Chrome. In general, jCanvas works
awesome on it. But again, this is just another of my test platforms, this
is not the crux of the issue.

---

Reply to this email directly or view it on GitHub:
#21 (comment)

from jcanvas.

I'm messing around with direct HTML Canvas code, and while it looks like the API supports shadows with stroked shapes OR filled shapes, it sure doesn't seem to me that it supports shadows with stroked AND filled shapes very cleanly at all.

from jcanvas.

Okay, I think I figured out a working solution, based on my tests. Essentially, I just added a condition that removed the stroke's shadow if the fill was also present with its shadow. Therefore, if the fill is not present, the stroke's shadow will still appear as expected.

The changes are on GitHub now.

from jcanvas.

Caleb - looks great, thanks. This and all my regression tests work on FF 13.01 and SRWare Iron 19.

from jcanvas.