react-altdraw

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

⚠️ 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.