# Changelog

## 8.0.0

### Major Changes

- c3ce015: v8 release — modernized internals, new stroke-eraser mode, hi-DPI export, and a large pointer/rendering fix sweep.

  ### Breaking changes
  - Rewrote the package as a layered architecture: `ReactSketchCanvas` (stateful) is now built on top of a new low-level `Canvas` component you can use directly for custom state/history.
  - Default raster `exportImage()` size now matches the rendered SVG dimensions and scales by `window.devicePixelRatio` for crisp hi-DPI output. Passing explicit `width`/`height` opts out of DPR scaling (caller owns the pixel count).
  - Export functions (`exportImage`, `exportSvg`) now reject with descriptive errors instead of silently failing.
  - New `touchAction` prop changes default touch behavior: touch-drawing modes still default to `"none"`, but pen/mouse-only canvases now allow native pan/pinch.
  - Dropped Cypress; tests are now Vitest + Playwright (CT + E2E).
  - Bumped `engines.node` to `>=22.13.0`.

  ### Features
  - **Stroke eraser mode** — new `eraserMode: "mask" | "stroke"` prop (fixes #200).
  - **`readOnly` prop** to disable drawing.
  - **`viewBox` prop** to fix blank-space rendering.
  - **`touchAction` prop** so parent containers can scroll while drawing still works.
  - **Customizable export size** via `ExportImageOptions`.
  - Windows Surface pen barrel-button can be used as an eraser.
  - New React Router + Fumadocs documentation site with LLM-friendly text endpoints.

  ### Fixes

  Pointer & touch (#205, #213):
  - #192 — iPad/Apple Pencil blue selection highlight during drawing
  - #181 — `onChange` doubling up strokes
  - #180 — double-tap needed for buttons after drawing
  - #146 — two-finger horizontal scroll on mobile
  - #128 — allow parent element to scroll with touch
  - #208 — multi-touch / parent-container gesture handling

  Rendering & geometry (#206):
  - #127 — slow performance with heavy strokes
  - #126 — vector glitches while drawing
  - #121 — stroke artifacts from duplicate points
  - #114 — viewBox not set when paths are loaded

  Export (#203, #213):
  - #105 — `exportWithBackgroundImage={false}` with data-URI backgrounds
  - #137 — broken background image in canvas exports
  - #145 — blurry exported PNG edges (now DPR-aware, #207)
  - #153 — exported image background always transparent
  - #155 — custom background images not exporting correctly
  - #179 — `exportImage()` / `exportSvg()` failing with "Export function called before canvas loaded"

  SVG / Firefox compatibility (#199, #204):
  - #142 — eraser trace persisting after SVG export + clear
  - #177 — multiple canvases sharing/cross-referencing masks
  - #194 — Firefox eraser mask rendering
  - partially addresses #54 and #141 (Firefox stroke rendering)

  ### Known follow-ups

  Some milestone issues were only partially resolved in v8 and have been split into new tracking issues.

- 4361d6c: - Add option to use Windows surface pen button as eraser
  - Memoize functions to reduce re-rendering

### Patch Changes

- 98200c3: - Add option to disable canvas (readOnly prop)
  - Remove cypress tests
  - Add playwright component tests
- 90ddaa0: Fix undo/redo behavior:
  - Fix timing issues by moving history update logic into mouse-down/redo/undo/clear functions
  - Prevent extra strokes from being recorded during history updates
  - Fix bug where canvas couldn't undo to empty state
  - Improve loadPath function to properly handle history state
  - Add proper history handling when using loadPaths
  - Fix reset canvas history logic
  - Implement event queue for undo/redo operations
  - Fix order of operations in history management
  - Add tests for undo behavior after clear and with loadPaths
- 70d45ed: Fix blank white space bug by allowing developers to set viewBox
- 77dd734: Fix: remove invalid mask attribute from stroke groups without eraser
- f85461f: Add xlinkHref fallback for SVG mask `<use>` references to improve Firefox compatibility
- 4daea40: - Add option to customize export image size
  - Upgrade packages
- 549e8ed: Fix unused eraser masks - firefox and random gaps

## 7.0.0-next.8

### Major Changes

- c3ce015: v8 release — modernized internals, new stroke-eraser mode, hi-DPI export, and a large pointer/rendering fix sweep.

  ### Breaking changes
  - Rewrote the package as a layered architecture: `ReactSketchCanvas` (stateful) is now built on top of a new low-level `Canvas` component you can use directly for custom state/history.
  - Default raster `exportImage()` size now matches the rendered SVG dimensions and scales by `window.devicePixelRatio` for crisp hi-DPI output. Passing explicit `width`/`height` opts out of DPR scaling (caller owns the pixel count).
  - Export functions (`exportImage`, `exportSvg`) now reject with descriptive errors instead of silently failing.
  - New `touchAction` prop changes default touch behavior: touch-drawing modes still default to `"none"`, but pen/mouse-only canvases now allow native pan/pinch.
  - Dropped Cypress; tests are now Vitest + Playwright (CT + E2E).
  - Bumped `engines.node` to `>=22.13.0`.

  ### Features
  - **Stroke eraser mode** — new `eraserMode: "mask" | "stroke"` prop (fixes #200).
  - **`readOnly` prop** to disable drawing.
  - **`viewBox` prop** to fix blank-space rendering.
  - **`touchAction` prop** so parent containers can scroll while drawing still works.
  - **Customizable export size** via `ExportImageOptions`.
  - Windows Surface pen barrel-button can be used as an eraser.
  - New React Router + Fumadocs documentation site with LLM-friendly text endpoints.

  ### Fixes

  Pointer & touch (#205, #213):
  - #192 — iPad/Apple Pencil blue selection highlight during drawing
  - #181 — `onChange` doubling up strokes
  - #180 — double-tap needed for buttons after drawing
  - #146 — two-finger horizontal scroll on mobile
  - #128 — allow parent element to scroll with touch
  - #208 — multi-touch / parent-container gesture handling

  Rendering & geometry (#206):
  - #127 — slow performance with heavy strokes
  - #126 — vector glitches while drawing
  - #121 — stroke artifacts from duplicate points
  - #114 — viewBox not set when paths are loaded

  Export (#203, #213):
  - #105 — `exportWithBackgroundImage={false}` with data-URI backgrounds
  - #137 — broken background image in canvas exports
  - #145 — blurry exported PNG edges (now DPR-aware, #207)
  - #153 — exported image background always transparent
  - #155 — custom background images not exporting correctly
  - #179 — `exportImage()` / `exportSvg()` failing with "Export function called before canvas loaded"

  SVG / Firefox compatibility (#199, #204):
  - #142 — eraser trace persisting after SVG export + clear
  - #177 — multiple canvases sharing/cross-referencing masks
  - #194 — Firefox eraser mask rendering
  - partially addresses #54 and #141 (Firefox stroke rendering)

  ### Known follow-ups

  Some milestone issues were only partially resolved in v8 and have been split into new tracking issues.

## 7.0.0-next.7

### Patch Changes

- Add xlinkHref fallback for SVG mask `<use>` references to improve Firefox compatibility

## 7.0.0-next.6

### Patch Changes

- Fix: remove invalid mask attribute from stroke groups without eraser

## 7.0.0-next.5

### Patch Changes

- Fix undo/redo behavior:
  - Fix timing issues by moving history update logic into mouse-down/redo/undo/clear functions
  - Prevent extra strokes from being recorded during history updates
  - Fix bug where canvas couldn't undo to empty state
  - Improve loadPath function to properly handle history state
  - Add proper history handling when using loadPaths
  - Fix reset canvas history logic
  - Implement event queue for undo/redo operations
  - Fix order of operations in history management
  - Add tests for undo behavior after clear and with loadPaths

## 7.0.0-next.4

### Patch Changes

- Add option to disable canvas (readOnly prop)
- Remove cypress tests
- Add playwright component tests

## 7.0.0-next.3

### Patch Changes

- Add option to customize export image size
- Upgrade packages

## 7.0.0-next.2

### Patch Changes

- Fix blank white space bug by allowing developers to set viewBox

## 7.0.0-next.1

### Patch Changes

- Fix unused eraser masks - firefox and random gaps

## 7.0.0-next.0

### Major Changes

- - Add option to use Windows surface pen button as eraser
  - Memoize functions to reduce re-rendering

# [6.1.0]

### Added

- Added optional id props to uniquely identify a sketch canvas
- Upgraded dependencies

### Changed

- Updated tests to use the id props

### Fixed

- Fix multiple ReactSketchCanvas in one page causes issues due to id="background" #52
- Fix ReactSketchCanvas doesn't work on safari. #53

## [6.0.3]

### Fixed

- Fix Package cannot be installed via npm #51
- update contributing.md
- update github actions

## [6.0.2]

### Added

- Added cypress tests for all props and events
- Added `onStroke` prop to get last stroke on pointer up
- Adds a point on click (without moving) #45

### Changed

- Upgraded all dependencies
- Moved to DTS (tsdx fork) instead of nx
- Switched codebase to hook based implementation (support react >= 16.8)
- Removed immer dependency

### Fixed

- Changed React import to \* from React #40
- Export image fails when the background is not an image [beta] #46
- Fix partial transparent erase (eraser stroke color changed to black for masking, add maskUnits) #44

### Breaking changes

- Renamed `onUpdate` to `onChange`

## [6.0.1-beta]

### Added

- Upgraded all dependencies
- Updated directory structure
- Added background image rendering directly in SVG
- Added option to export background image while exporting the canvas as image or SVG
- Added background image aspect ratio control
- Updated erase option to use mask instead of canvas color
- Add github action for deployment of storybook and package

### Breaking changes

- Removed background option to set background image using CSS-in-JS (instead check feature-filled backgroundImage prop)

## [5.3.5]

## Changed

- Changed import react as `import * as React from 'react'`

## [5.3.4]

### Added

- Switched to Nx
- Updated documentation

### Changed

- Removed pepjs. Can be polyfilled by the web app directly instead

## [5.3.3]

### Fixed

- add support any version above react 16.4

## [5.3.2]

### Fixed

- Bump dependency versions

## [5.3.1]

### Fixed

- Set default value of `allowOnlyPointerType` as `'all'` again

## [5.3.0]

### Added

- Reset canvas option to reset internal state and clean undo/redo stack

### Fixed

- Fix exportImage function to export png in Firefox and Safari

## [5.2.0]

### Added

- Add `withTimestamp` prop and `getSketchingTime` function to measure the sketching time of the user

## [5.1.2] & [5.1.1] (Both are same - Sorry)

### Added

- Add index.d.ts to npm registry
- Add Github as registry
- Update example

## [5.1.0]

### Added

- Added defaultProps to onUpdate in ReactSketchCanvas
- Added touch-action="none" to allow pepjs polyfill pointer events
- Update README.md

### Fixed

- Removed the annoying console.log from Canvas

## [5.0.1]

### Added

Added README :)

## [5.0.0]

### Added

- Rewrote codebase in typescript
- Added pepjs to support more browsers
- Added onUpdate feature to get current paths in `CanvasPath` type

### Fixed

- Fixed sketch offset issue when the canvas is scrolled

### Changed

- Updated undo/redo/reset strategy
- Updated demo in storybook

## [4.0.0]

### Added

- Renamed SvgSketchCanvas to ReactSketchCanvas to keep naming convention
- Added className property to set class names for CSS selectors

### Deprecated

- Removed SvgSketchCanvas

## [3.0.1]

### Changed

- Moved immutable dependency from Canvas file

## [3.0.0]

### Changed

Removed onUpdate feature and made the system modular

### Added

- Made Canvas as a separate module. Now event handlers can be hooked with Canvas
  class to update paths from server. (For Collaboration use case)

### Deprecated

- Removed onUpdate feature and instead made Canvas module

## [2.3.0]

### Added

- Added onUpdate property to get the current sketch paths after every update

## [2.2.0]

allowOnlyPointerType

### Added

- Added "allowOnlyPointerType" use-case. Now single pointer type can be targetted

## [2.1.0]

### Added

- Switched to pointer events

## [2.0.1]

### Added

- Add SVG background using CSS

## [2.0.0]

### Added

- Export and load paths
- Erase mode and eraser width

### Changed

- Rename exportAsImage() to exportImage() for naming consistency

### Deprecated

- Rename exportAsImage()