redraw

Redraw is an MSPaint-like drawing component for React. It provides a simple interface for drawing on a canvas, and it supports loading and saving the drawing as a data URL.

Getting Started

Install dependency:

$ npm install @iolo/redraw

Import and use the component:

import { Redraw } from '@iolo/redraw';

function App() {
  return (<Redraw onChange={(dataUrl) => console.log(dataUrl)} />);
}

That's it! You can now draw on the canvas and save your drawing as a data URL.

You can use useRef to get the reference of the Redraw component and call its methods to manipulate the drawing programmatically.

import { useRef } from 'react';
import { Redraw, RedrawRef, loadImage, saveImage } from '@iolo/redraw';
function App() {
  const redrawRef = useRef<RedrawRef>(null);

  const handleSave = () => {
    if (redrawRef.current) {
      const dataUrl = redrawRef.current.getDataUrl(); // get the drawing as data URL
      saveImage(dataUrl, 'drawing.png'); // download(save on local) the image as file
    }
  };

  const handleOpen = async (event) => {
    const file = event.target.files[0];
    const dataUrl = await loadImage(file); // load the image file as data URL
    redrawRef.current?.setDataUrl(dataUrl); // load the data URL into Redraw
  };

  return (
    <>
      <Redraw
        ref={redrawRef}
        width={500}
        height={500}
        tool="pen"
        strokeColor="#000000"
        strokeWidth={2}
        fillColor="#ff0000"
        backgroundColor="#ffffff"
        dataUrl="" // initial data URL
      />
      <button onClick={handleSave}>Save</button>
      <input type="file" id="fileInput" onChange={handleOpen} />
    </>
  );
}

Features

• Pen, Spray, Eraser, Spoid(Picker), Fill, Line, Rectangle, Circle(Ellipse) tools
• Paint-style layout: tools at top-left, controls below tools, drawing area on the right, colors at bottom-left, and palette at bottom-right
• SVG-based tool and action icons styled with CSS
• Stroke width control
• Shared 32-color palette for stroke and fill
• Current stroke/fill previews with swap action
• Custom color dialog with RGBA sliders and HEX input
• Background color property support
• Undo/Redo
• Load/Save drawing as data URL
• Utilities for manipulating/loading/saving images

Tech Stack

Frontend

• typescript
• react - UI library

Testing

• vitest - Unit testing
• playwright - E2E testing

Build

• vite

Guidelines

• Keep it simple and minimal.

May the SOURCE be with you!