piskel: Bug: Canvas workspace disappears/goes grey when zooming in
Bug description
When zooming into the canvas, if the zooming obscures the horizontal and vertical boundaries of the image, then the visible canvas turns grey. The layers and preview window(s) are unaffected: it’s just what is visible in the active workspace that vanishes. I can draw on the layers and the results will show up in the preview, but I can’t see anything in the workspace. It basically means being unable to zoom adequately on medium->large sized sprites. However, I’ve only seen this problem on the Google Chromebook Pixel 2015. Other devices (e.g. Chromebooks like the Toshiba Chromebook 2014) seem to work fine.
I’ve not looked into the repository’s source code, but when inspecting the page and checking the elements, it seems to be related to the <canvas> with the class name canvas-overlay. When I hide it, the workspace becomes visible, but the background becomes grey as well (screenshots included at the bottom).
Steps to reproduce the bug
- Go to piskelapp.com
- Open a piskel sprite
- Zoom into the work area beyond both the horizontal and vertical boundaries
Environment details
- operating system: Chrome OS
- browser: Google Chrome Version 57
- device: Google Chromebook Pixel 2015
Screenshots
Before zooming
After zooming
Opening the inspector
Hiding the overlay canvas
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 32
Commits related to this issue
- Fix #651 - stop drawing the zoomedout background if unnecessary — committed to piskelapp/piskel by juliandescottes 7 years ago
It works perfectly just like it used to
On Sat, May 6, 2017 at 5:24 AM, Julian Descottes notifications@github.com wrote:
–
– This e-mail message was sent by a student at Hillsborough High School. If you feel any content in this message is inappropriate or potentially harmful, please contact hhs_email_abuse@htps.us.
–
– NOTICE: This e-mail message, including any attachment(s), is for the sole use of the intended recipient and may contain confidential and privileged information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender by reply e-mail and destroy all copies of the original message.
Oh great, finally some progress 😃 This version might not be ideal for actually using the editor, since the borders will hide a bit the edge of your drawing, but I just need to refine that now. Thanks for the quick feedback!
Some investigation first.
The gray color from @lokothodida 's screenshots is #A0A0A0 . This color is only used in one spot in the application : to display the zoomed out area.
The two main canvas used in the application are the drawing canvas, which contains the current frame+layer, and the overlay canvas, which displays anything temporary (cursor, selection, shapes …).
They are rendered exactly in the same way: 1 - fill the canvas with #A0A0A0 2 - translate the canvas context to center it on the origin of the drawing 4 - scale the canvas context (to compensate the ratio between the canvas size and the actual sprite size) 5 - clear the area corresponding to the sprite size 6 - draw the sprite 7 - revert the scale 8 - clear lines horizontally and vertically to render the “grid if needed”
From the various screenshots and reports I’ve seen, it seems like step 5 is not working as expected. It should cut a “hole” in the gray area to make sure the drawing zone is visible, but obviously … it doesn’t. The other interesting thing is that the issue seems to start when there is actually no need to draw any zoomed out color.
To say it differently, the issue occurs when the clear from step 5 needs to clear the whole canvas. I already had issues with Chrome when using fillRect, clearRect with the maximum height and width ( if anybody’s curious : https://bugs.chromium.org/p/chromium/issues/detail?id=469906 ).
I’m going to guess it’s a similar issue and clearRect at full height + width is buggy?