Black&White mode not working as intended. about jspaint HOT 3 CLOSED

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.

from jspaint.

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.

from jspaint.

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

from jspaint.