8000 form.fill does not fill entire space · Issue #119 · williamngan/pts · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

form.fill does not fill entire space #119

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.

Sign up for GitHub

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

Jump to bottom
Closed
JulianBroudy opened this issue Sep 11, 2020 · 7 comments
Closed

form.fill does not fill entire space #119

JulianBroudy opened this issue Sep 11, 2020 · 7 comments
Labels
bug

Comments

@JulianBroudy
Copy link

Hi there,

I stumbled upon a peculiar behavior.
Filling the space keeps a transparent line on top and on the left of the space.
I suspect this is the bgcolor.

let run = Pts.quickStart( "#pt", "#ff99ee" );
run( (time, ftime)  => { form.fill("green").rect(space.innerBound); });

Result:
image

Removing the bgcolor ("#ff99ee") when initializing does not help.
What's weird is that when resizing the window in your online editor, it snaps to place and everything looks good.
But anytime the code is run again, same result with lines at the top and left of page.

My end-goal includes more than filling the background only once and so the option to only initialize the bgcolor does not work for me although results with the expected behavior.
@williamngan
Copy link
Owner

Hi @JulianBroudy , there's a 1px stroke by default. Can you try form.stroke(false).fill(...) or form.fillOnly(...) and see if the problem still persists? Thanks!

@JulianBroudy
Copy link
Author
JulianBroudy commented Sep 12, 2020 •
edited
Loading

Thanks for the quick response.

I tried each and a combination of both, problem persists:

image
(This was run on the Pts.js Editor)

For the record, I am actually using a 8000 gradient as my background as shown in the example in this documentation.

But I was able to replicate the problem with these:

let run = Pts.quickStart( "#pt", "#ff99ee" );
run( (time, ftime) => { form.fill("green").rect(space.innerBound); });

and so chose to keep it simple rather than complicate it.

@williamngan
Copy link
Owner

Good catch! This looks like a retina resolution issue.

I think this line is causing the 0.5px gap problem.
https://github.com/williamngan/pts/blob/master/src/Canvas.ts#L208

Most likely this was a fix for the bottom pixel gap in the old versions of browsers. But now the issue has been fixed in the browser, we can probably remove it. 😛

I'll try to make a quick patch today.

@JulianBroudy
Copy link
Author

Great, thanks.

And again, your library is AWESOME!

williamngan added a commit that referenced this issue Sep 13, 2020
@williamngan
Fix half-pixel gap at the top-left edge of canvas #119
a86e468
@williamngan
Copy link
Owner

Thanks! It's now patched in v0.9.5. See if it works :)

@JulianBroudy
Copy link
Author

When trying out my website with multiple gradients, it works like a charm.
Thanks a million!

I do have another question I ran into yesterday, it has to do with resizing the canvas, can I ask it here or would you rather I open a new issue for it?

@williamngan
Copy link
Owner

Glad to hear! Please open a new issue so that we can keep track of it if it's a bug. Thanks Julian.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@williamngan @JulianBroudy
0