React-altdraw NPM

Simple react component library to draw some basic shapes using canvas. inspired by p5.js and react-p5

:warning: This is a work in progress: This library is not ready for production use yet.

Example

import Draw from 'react-altdraw';

function App() {
  return (
    <Draw
      setup={(canvas) => {
        canvas.width = 300;
        canvas.height = 300;
      }}
      draw={(dc) => {
        dc.background('gray');
        dc.fill('white');
        const x = dc.windowWidth / 2;
        const y = dc.windowHeight / 2;
        const r = Math.abs(Math.sin(dc.frameCount / 100)) * 100;
        dc.circle(x, y, r);
        dc.text(`frameRate: ${dc.frameRate}`, 10, 20, 20, 'monospace');
      }}
    />
  );
}

Implemented shapes and features

Feature	Description	Status
`background`	Set the background color	✅
`fill`	Set the fill color	✅
`stroke`	Set the stroke color	✅
`strokeWeight`	Set the stroke weight	✅
`noFill`	Disable fill	✅
`noStroke`	Disable stroke	✅
`arc`	Draw an arc	✅
`ellipse`	Draw an ellipse	✅
`circle`	Draw a circle	✅
`line`	Draw a line	✅
`rect`	Draw a rectangle	✅
`triangle`	Draw a triangle	✅
`quad`	Draw a quadrilateral, a four sided polygon	✅
Curves and bezier	Draw curves and bezier curves	❌
Typography	Draw text on the canvas	✅
`map`	Re-maps a number from one range to another	✅
`dist`	Calculate the distance between two points	✅
`noise`	Generate a value between 0 and 1	✅
Vector manipulation	Add, subtract, multiply, divide, and more	❌
`context`	draw on 2d context it manually	✅
`width` and `height`	The width and height of the canvas	✅
`mouseX` and `mouseY`	Horizontal and vertical position of the mouse	✅
`pmouseX` and `pmouseY`	Previous horizontal and vertical position of the mouse	✅
`mouseIsPressed`	True if the mouse is pressed	✅
`mouseButton`	The current state of the mouse button	✅
`mouseWheel`	The amount the mouse wheel has moved	❌
`key`	The value of the most recent key pressed	✅
`keyCode`	The value of the most recent key pressed	✅
`keyIsPressed`	True if a key is pressed	✅
`frameCount`	The number of frames displayed	✅
`frameRate`	The number of frames displayed per second	✅
`save`	Save the canvas as an image	❌
`fullscreen`	Set the canvas to fullscreen	❌
Transformations	Translate, rotate, scale, and more	❌
Image manipulation	Load, display, and manipulate images	❌

Notes

This library is not intended to replace p5.js, it's just a simple alternative for react developers who want to draw shapes using canvas.
This library will not support webgl, sound, or any other feature that is not related to drawing shapes on a canvas or user interaction. This is a design decision to keep the library simple and focused.
This library is not intended to be a 1:1 copy of p5.js, some features may be missing or implemented differently.
This library is not intended to be a general purpose canvas library, it's just for drawing shapes and user interaction.

drawing react canvas p5 p5.js processing

5 months ago

5 months ago

1 year ago

1 year ago

1 year ago

1 year ago