Use a new canvas implementation

[zeke]

The existing react-sketch-canvas package that's currently used has a number of issues:

• https://github.com/replicate/scribble-diffusion/issues/17
• https://github.com/replicate/scribble-diffusion/issues/15

There are probably a lot of alternative npm packages out there that do the same thing, but better. Here are some that might be useful:

• https://www.npmjs.com/package/react-canvas-draw
• https://github.com/federico-moretti/canvas-free-drawing
• https://github.com/rough-stuff/rough
• https://github.com/pshihn/path-data-parser
• https://github.com/pshihn/bezier-points
• https://github.com/pshihn/points-on-path

[zeke]

I would love help from the community on this one!

[scsmash3r]

It seems that this is the problem with a mask. I'm not familiar with react, nor with that one lib, but digging briefly through the code, it seems that the mask is used with eraser function.

Since you don't have an erasing element on your canvas, but "Undo" button instead, you could remove mask attribute from #react-sketch-canvas element to show whole canvas without that mask. For me it solves the problem on Firefox.

https://user-images.githubusercontent.com/4781532/222332276-d34b3261-5baf-46d4-9da2-c4f49d9f0481.mp4

[scsmash3r]

This Greasemonkey script serves as a workaround on a client's side, but if added serverside, it can temporary solve the problem till the full-fledged fix :P

  // ==UserScript==
  // @name scribblediffusion canvas temp fix
  // @description Removes mask attr from canvas element for proper view in firefox
  // @match https://scribblediffusion.com/
  // @version   1.0.0
  // ==/UserScript==

  window.addEventListener('load', function () {
      var canvas_with_mask = document.querySelector("#react-sketch-canvas__stroke-group-0");
      canvas_with_mask.removeAttribute("mask");
  })

[kcoderhtml]

I can verify that the script @scsmash3r gave fixes the issue.

[zeke]

Nice work! Thanks for your help on this.

https://twitter.com/zeke/status/1631507015863517184