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

Black&White mode not working as intended. #20

Closed
Wad67 opened this issue Oct 28, 2017 · 3 comments
Closed

Black&White mode not working as intended. #20

Wad67 opened this issue Oct 28, 2017 · 3 comments

Comments

@Wad67
Copy link

Wad67 commented Oct 28, 2017

When changing Image -> Attributes -> Colors -> Black & White
A few things don't work correctly.

Namely the patterns don't draw the same way they did in the original paint, appear to work more like brushes. A single click with the paint tool produces the expected pattern, but clicking and dragging 'smears' the pattern.
Same issue applies with the line tool.

Rectangle appears to draw the border correctly, but is unable to fill.
Polygon does not draw the border correctly and cannot fill.

Same issues apply for ellipse and rounded rectangle.

The paint bucket/fill does not appear to work with the black & white patterns either.

Seeing as how airbrush works just fine with the black & white patterns I don't believe it would be too difficult to add that functionality to the paint tool.

@1j01
Copy link
Owner

1j01 commented Oct 30, 2017

Most of this stuff, along with #7 and #6, should be easy, but it's all complicated by trying to make everything anti-anti-aliased. Antialiasing is the default and only option (except when scaling images) in the Canvas API, but aliasing, aside from being retro, has the practical benefit that the fill tool naturally avoids leaving ugly seams along the edges of shapes, without having to have a tolerance setting.

I've been looking into using pixi.js for rendering shapes. It's not perfect: it doesn't support using an even-odd winding rule like mspaint uses, and 1px strokes on shapes don't work quite right... but it should definitely be a step up!

Filling shapes with patterns seems to work in Chrome, Firefox, and Edge. Did you select a filled style in the tool options? The default is no fill.
I think I'll be working on this soon (adding pixi.js) so even if there is a bug it probably won't be relevant for long. 😄


  • The brush and line tools currently use a cached offscreen canvas because of some slow aliased circle drawing code, so the pattern is applied only when rendering said canvas.

  • The eraser, airbrush, and rectangle tools, and currently also the rounded rectangle and ellipse tools although they're very inefficient because of it, use fillRect. They should all work with patterns.

  • The curve and polygon tools don't yet support anti-anti-aliasing (AAA) so they just use the canvas API normally which means they work with patterns. The polygon actually tries to do AAA for the preview, for no particularly good reason, so it looks smeared like the line tool until it's finalized.

  • The fill tool uses an algorithm that replaces pixels in-place in an ImageData object, and I see a couple options for making it work with patterns:

    1. rewrite it to keep track of the pixels it's affecting / has visited in a separate ImageData object, and then use that to draw the fill, as a mask for the selected pattern.
    2. access the pattern data during the fill algorithm; there's no direct way to access a Pattern object's data, width or height, so it would need to be stored elsewhere.

@1j01
Copy link
Owner

1j01 commented Jun 29, 2018

I've made some progress on this.

The line, curve, polygon, rectangle, rounded rectangle, and ellipse tools all now support patterns and aliasing.
Remaining are the fill, brush, and pencil tools, as well as the eraser tool when used with right click to replace colors.

@1j01
Copy link
Owner

1j01 commented Feb 3, 2021

This is done. I finished this up last year for the Winter Update (the Winter theme has candy cane patterns in the palette 💈🎨 )

@1j01 1j01 closed this as completed Feb 3, 2021
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

2 participants