https://github.com/johanbook/react-canvas

React component for drawing particles on a canvas
https://github.com/johanbook/react-canvas

canvas react

Last synced: about 2 months ago
JSON representation

React component for drawing particles on a canvas

• Host: GitHub
• URL: https://github.com/johanbook/react-canvas
• Owner: johanbook
• Created: 2020-10-25T07:50:37.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2020-11-01T09:26:07.000Z (over 4 years ago)
• Last Synced: 2025-04-26T19:39:51.314Z (2 months ago)
• Topics: canvas, react
• Language: JavaScript
• Homepage:
• Size: 246 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# @johanbook/react-canvas

![](https://img.shields.io/travis/johanbook/react-canvas)

![](https://img.shields.io/npm/v/@johanbook/react-canvas)

This library aims to make it easier to draw on HTML canvases.

## Install

Install it using

```sh

npm install @johanbook/react-canvas

```

## Basic usage

We can create a simple wave as

```jsx

import Canvas from "@johanbook/react-canvas";

const NUM = 100;

const items = [];

for(let idx = 0; idx < NUM; idx++){

  items.push({x: idx/NUM, y: 0})

}

const handleUpdateItem = (item, t) => {

  item.y = Math.sin(item.x*8 +t-0.5)/2 + 0.5;

}

function Component() {

  return ();

```