pengfeiw / react-paint

windows 画板 —— Microsoft Paint

React Paint

中文说明

Microsoft Paint realized with reactjs.

online: https://pengfeiw.github.io/minicode/react-paint

Feature

Support mouse and touch screen, so you can use it with IPad.

• pen
• eraser
• fill
• change color
• change linewidth
• many shapes
• two linestyle: solid and dot
• redo and undo
• extract color

Run in local

• clone repository: git clone https://github.com/pengfeiw/react-paint.git
• install package: npm install
• start server: npm run start
• open in browser：http://localhost:3000

Technique

• TypeScript
• React
• Material-UI
• 2D drawing with canvas

Has issue?

If you run into any problems, you can leave a message in <<react实现简易画板程序>> or commit an issue.

More fun and interesting things, visit minicode.

react-paint's Issues

Resize issue on canvas

Image is clipped when resize window.

How to replicate the issue:

1. Draw a image like screenshot-1
2. Adjust the window to small one
3. Then the original image will be clipped like screenshot-2

my suggestion as below:

      window.addEventListener('resize', () => {
        // Get current snapshot
        const currentSnapshot = snapshot.current;
        // Create dummy canvas, then draw current snapshot
        const dummyCanvas = document.createElement('canvas');
        const dummyCanvasCtx = dummyCanvas.getContext('2d');
        dummyCanvas.width = currentSnapshot.width;
        dummyCanvas.height = currentSnapshot.height;
        if (dummyCanvasCtx) {
          dummyCanvasCtx.putImageData(currentSnapshot, 0, 0);
        }
        // Redraw to Resized canvas
        canvas.height = canvas.clientHeight;
        canvas.width = canvas.clientWidth;
        Tool.ctx.drawImage(dummyCanvas, 0, 0, dummyCanvas.width, dummyCanvas.height, 0, 0, canvas.width, canvas.height);
      });

Does not support iPad?

Open demo (https://pengfeiw.github.io/react-paint/) on iPad, it does not work.

Or try iPad size on Web, does not work, too.

Will you pack the key feature as npm package?

Hi,

The repo is awesome. Thanks for your sharing.

Have you considered pack the key feature as npm package?
e.g. https://www.npmjs.com/package/react-canvas-draw
Compared to the above package, your features are more better than that.

Filling issue

Will leave some weird edge after filling.

How to replicate:

1. Fill the whole background with green color, refer to: screenshot-1
2. Draw a circle with red color, refer to: screenshot-2
3. Fill red color inside the circle, refer to: screenshot-3
4. Fill red color outside the circle, refer to: screenshot-4

By right all the canvas will the in red color, but actually not.

Could you help on this?
Thank you.