CanvasFrame is a frame helper that makes it easier to use canvas with react-sim.

It's used in many of the examples such as Chaos Game, Percolation) Epidemic simulation, etc.

Time: 0

500

CanvasFrame properties

Its properties are:

All the connected Frame context props, plus:

Name	Description
draw function, optional	A function which will be called each time CanvasFrame is updated (ie at each animation cycle)
height number, optional	The height of the canvas. If ignored, CanvasFrame will used `params.height`.
width number, optional	The width of the canvas. If ignored, CanvasFrame will used `params.width`.

the draw function

The draw function does all the heavy lifting.

Its argument is an object with the following properties:

All the CanvasFrame properties, plus:

Name	Description
canvas DOM Node	The actual canvas node
ctx Canvas rendering context	the corresponding 2d context. Exactly what you'd get if you typed `const ctx = canvas.getContext('2d');`
circle Helper function	see circle API
roundRectangle Helper function	see roundRectangle API

circle and roundRectangle are helper functions to make it easier to draw circles and rounded rectangles with canvas.

Both take an object as argument with the following properties:

circle takes an object as argument with the following properties:

All the CanvasFrame properties, plus:

Name	Description
x number	x coordinate of circle center
y number	y coordinate of circle center
r number	Radius of circle

roundRectangle takes an object as argument with the following properties:

All the CanvasFrame properties, plus:

Name	Description
x number	x coordinate of top-left corner of rectangle
y number	y coordinate of top-left corner of rectangle
width number	Width of rectangle
height number	Height of rectangle
tl number, optional	Radius of top-left corner
tr number, optional	Radius of top-right corner
bl number, optional	Radius of bottom-left corner
br number, optional	Radius of botrom-right corner
r number, optional	Radius of all unspecified corners

so for example, you can have a draw function that would go like this:

const draw = ({ctx, data, circle, params}) => {
  const {height, width} = params;
  ctx.clearReact(0, 0, width, height);
  data.forEach(d => circle({x: d.x, y: d.y, 2}));
  ctx.fill();
}