Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot set 0 outline (stroke thickness) width on Shapes -- the setStrokeStyle(0) function #944

Open
flackjap opened this issue Mar 23, 2018 · 4 comments

Comments

@flackjap
Copy link

flackjap commented Mar 23, 2018

I'm using the 0.8.2 version, but I've searched through the changelog and didn't see any changes that might deal with this problem.
UPDATE: In codepen linked below, I also used the 1.0.2 version of EaselJS.

The problem:

When I create any shape (Square in this case) and set its stroke thickness to 0, it still displays the stroke (outline) as it is 1px width. Of course, the workaround is not to set stroke at all, and it won't display any stroke at all, but the problem is that I had to initially set the stroke, so that I would have access to the "command" of it, for a later dynamic change of thickness, color, etc.

Here's the codepen - https://codepen.io/flackjap/pen/WzONgV?editors=1010

I tried using the endStroke() method, but it won't display any stroke on Shape if used, and it also messes up later with my command references for later use.

The workaround with not using the stroke at all (setStrokeStyle and beginStroke) seems ok, as I said, but since I need to change/add the stroke at some point later, I could eventually make it redraw the whole shape with setStrokeStyle and beginStroke if there wasn't any stroke, but also destroy the shape and redraw it again if user of my app decides to reduce thickness back to 0 again.

UPDATE2: There's another even simpler workaround. I found out that the subpixel thickness works by setting the alpha to existing 1px thickness. So, if I do setStrokeStyle(0.1) it will actually be as it's invisible, which completely fixes the problem. I will just set in my app that if the User sets thickness to 0, that it actually drops it to 0.1.

@MannyC
Copy link
Contributor

MannyC commented Mar 23, 2018

This uses CanvasRenderingContext2D.lineWidth under the hood, which can't be zero ( https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth )

@flackjap
Copy link
Author

Oh, thanks @MannyC
Now I also see that the stroke is still visible with 0.1 value (tried editing the ctx.lineWidth on the page you linked), but the 0.01 or even 0.001 surely makes it invisible.

@MannyC
Copy link
Contributor

MannyC commented Mar 23, 2018

Oops, I should have said this first: you know you can just fill without stroking?

@flackjap
Copy link
Author

Yes, I know that :) and I explained in my initial description why I needed to set any stroke initially - because the User of my app will be able to change the stroke thickness at some point, so I thought that just setting the initial 0 thickness would work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants