MS Paint recreates the classic Windows paint app in the browser: a canvas with a toolbox, color palette, brush sizes, and undo. Everything is drawn with the native canvas API, so it runs anywhere React does. Use it for playful portfolio pieces, drawing demos, and easter eggs that invite visitors to actually interact with your site.
Installation
Usage
import { MSpaint } from "@/components/ui/ms-paint";// Basic usage with default settings
<MSpaint />
// Custom size and title
<MSpaint
width={1000}
height={600}
title="My Drawing App"
/>
// Custom colors and brush settings
<MSpaint
colorPalette={["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff", "#00ffff"]}
brushSize={5}
eraserSize={30}
/>
// With save callback
<MSpaint
onSave={(canvas) => {
const image = canvas.toDataURL('image/png');
console.log('Canvas saved:', image);
}}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | 800 | Width of the drawing canvas container in pixels |
height | number | 500 | Height of the drawing canvas area in pixels |
canvasWidth | number | 2000 | Width of the actual canvas element (determines draw area) |
canvasHeight | number | 2000 | Height of the actual canvas element (determines draw area) |
colorPalette | string[] | DEFAULT_COLORS | Array of hex color codes for the color palette |
title | string | 'untitled - Paint' | Title text displayed in the window header |
menuItems | string[] | ['File', 'Edit', 'View', 'Image', 'Options', 'Help'] | Array of menu item names to display in the menu bar |
className | string | '' | Additional CSS classes to apply to the container |
style | React.CSSProperties | {} | Additional inline styles to apply to the container |
onSave | (canvas: HTMLCanvasElement) => void | undefined | Callback function when the save button is clicked |
brushSize | number | 2 | Size of the brush used for drawing |
eraserSize | number | 20 | Size of the eraser used for erasing |