【React】Canvasを作成する

createCanvas関数でスケッチを描画するためのcanvas要素を作成する。

import React, { useEffect } from 'react';
import p5 from 'p5';

const sketch = (p: p5) => {
  p.setup = () => {
    p.createCanvas(640, 480);
  }

  p.draw = () => {
    p.background('black');
  }
}
    
const Canvas: React.FC = () => {
  useEffect(() => {
    new p5(sketch)
  })
  return (
    <React.Fragment>
    </React.Fragment>
  );
}
    
export default Canvas;

今回は、以下のように出力される。

参考

reference | p5.js

p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Process...