and view it in full screen. The line is not black and one pixel wide, but is a thick grey blurry stripe. I suspect that some kind of simple anti-aliasing is taking place here.
My above “line graphics” look so ugly in Snap that it’s no fun at all to implement them in Snap.
In BYOB, a line of thickness 1 was actually that: exactly 1 pixel thick. How do I get the pen in Snap to draw a normal line of thickness 1?
I noticed this the other day too. This screenshot shows pen size 1 on the left and size 2 on the right. The size is the same, but the transparency is not…?
I think this was introduced in the latest update. In Snap 9 it certainly wasn’t an issue (I can’t check Snap 10 because it isn’t available on the snap site right now). However, I’m pretty sure that yesterday it was working for me, I closed the page and read something on the forum saying size 1 was transparent, and created the exact same scenario on a new snap project only to find that size 1 was indeed transparent. So the bug may not always show up (or I might be inobservant and missed it the first time).
Wait for the Snap devs to fix the recently added bug!
There has been no change to Snap!’s pen for the past years.
Snap’s stage graphics resolution, however, is not necessarily the same as your expensive computer monitor’s. I’m supporing hi-res for rendering blocks and the ui - and also pen trails -, but not costumes. Once you turn pen trails into a costume, I’m scaling its resolution down to match the stage’s.
But this has been the case for a decade.
If you want to export hi-res line art you can use the “pen vectors” setting for creating SVGs.
Using your exact script from above, I get this image (in full-screen mode):
I didn’t convert the pen trails into a costume; this is how the pen trails are displayed on the stage. There is no thin black line here, but rather a thick, semi-transparent gray line.
This was definitely not always the case with Snap — my students draw the above thread graphics every year, and only this year are the lines blurry instead of clear and thin. There is something strange going on with the pen.
Okay, it turns out I was wrong. This is also a problem in V9 (and probably earlier). The key is that it only occurs when using an existing project that was opened, rather than a new one. I have my bookmark for the Snap program link to a default project of mine, so I only encountered the issue in the latest version. Here is a screen capture for additional clarity:
that’s odd, because I can’t not reproduce it. It happens in the editor in both fullscreen and the small window, as well as on an actual project page (again, both fullscreen and not).
even using your exact code, it’s still happening in all 4 situations.
I’m pretty sure this was only relevant to V9, but I also tried it in both an existing project and a new one and it still didn’t function as intended.
This is clearly a widespread problem that you can’t easily just mark off as “yup you have an expensive monitor with a different resolution” or “you are for sure turning your pen trails into a costume” (unless Snap! is automatically doing that whenever you draw with the pen, but I doubt that is the case based on your code working for you)
I think the best fix for this for now is to add 0.5 to each axis in the position so that each point is centered to the pixel, so that it doesn’t show up as 2 blurry pixels, but rather 1 super sharp pixel.
Even though adding 0.5 to each coordinate is a possible temporary fix for drawing thin lines, Snap itself should take care of drawing thin lines when the width is set to 1px.
I can’t expect a student to always add 0.5 to each coordinate to get clean lines just because Snap doesn’t draw cleanly on its own. Every simple drawing program (and Scratch, too, by the way!) can draw a clean horizontal thin line with a width of 1 px on the same screen.
One more note: The problem occurs on every screen with HD resolution. Perhaps this will help narrow down the error and first of all to reproduce the error, which apparently does not occur on Jens’ high-end screen
I strongly request to improve the drawing algorithm for lines so that a 1px line is 1px wide at any resolution.
By the way: The +0.5 trick only works for perfectly horizontal and perfectly vertical lines. All other lines still look terrible with a width of 1px (see picture).
once again, this is simply how your browser and OS renders lines onto bitmaps, not something we decide. We are simply calling the API, not implementing the lines themselves (although you might want to look up Bresenham’s line algorithm to find out more about what’s bothering you wrt raster graphics in general).
Chrome.141 @ Win10 works this way with the Shift “Retina display support” disabled. This option seems to be stored within the project.
Everyone can check ratio @ debug console > window.devicePixelRatio .
For my test env = 1.25 .
Hi Jens, I know the Bresenham. The problem is that also with Bresenham I have to color pixel by pixel - and how am I supposed to color single pixels in Snap with this bug?
The usual method “pen down, move 0 steps, pen up” (that a year a ago did work in Snap!) gives me a light grey blurry circle instead of a point (with pen color black and pen size 1), see attached picture where you hardly can see the “point”.
@Jens, how am I supposed to use the pen tool in any way? I cannot change the drawing behaviour of my browser. I tried under Windows in Firefox, Chrome, Edge.