The scratch paint React API

<PaintEditor
    image={optionalImage}
    onUpdateImage={handleUpdateImageFunction}
    imageId={optionalId}
    imageFormat='svg'
    rotationCenterX={optionalCenterPointX}
    rotationCenterY={optionalCenterPointY}
    rtl={true|false}
    zoomLevelId={optionalZoomLevelId}
/>

Broadly, the API takes an SVG or bitmap image, and calls onUpdateImage when it is changed.

• image: may either be nothing, an SVG string or a base64 data URI. SVGs of up to size 480 x 360 will fit into the view window of the paint editor, while bitmaps of size up to 960 x 720 will fit into the paint editor. One unit of an SVG will appear twice as tall and wide as one unit of a bitmap. This quirky import behavior comes from needing to support legacy projects in Scratch.

• onUpdateImage: A handler called with the new image (either an SVG string or an ImageData) each time the drawing is edited.

• imageId: If this parameter changes, then the paint editor will be cleared, the undo stack reset, and the image re-imported. (Think render skin ID)

• imageFormat: 'svg', 'png', or 'jpg'. Other formats are currently not supported.

• rotationCenterX: x coordinate relative to the top left corner of the sprite of the point that should be centered.

• rotationCenterY: y coordinate relative to the top left corner of the sprite of the point that should be centered.

• rtl: True if the paint editor should be laid out right to left (meant for right to left languages) zoomLevelId: All costumes with the same zoom level ID will share the same saved zoom level. When a new zoom level ID is encountered, the paint editor will zoom to fit the current costume comfortably. Leave undefined to perform no zoom to fit. (Think sprite ID)

npm run install && npm run start in the root of the repo to play with the stand alone paint editor: http://localhost:8078/playground/