React component that wraps a canvas element and offers a clean API for drawing.
Via NPM
npm install --save react-canvas-wrapper
Via Yarn
yarn add react-canvas-wrapper
Properties
canvasRef:Function
- Function to set reference to <canvas>
element. (Default: (element) => { this.canvas = element; }
)draw:Function
- Callback called when props change on the component. (Default: (canvas) => {}
)width:Number
- Width of the canvas @ 1x. (Default: 30
)height:Number
- Height of the canvas @ 1x. (Default: 30
)pixelRatioAware:Boolean
-Â Flag that triggers whether or not the <canvas>
should be sized contextually based on the devicePixelRatio
. (Default: true
)Example - Canvas ref
import {Canvas} from 'react-canvas-wrapper';
...
componentWillReceiveProps(nextProps) {
this.refreshCanvas();
}
refreshCanvas() {
const canvas = ReactDOM.findDOMNode(this.canvas);
const context = canvas.getContext('2d');
/**
* ...Perform canvas magic here...
*/
}
render() {
return (
<Canvas canvasRef={(element) => { this.canvas = element; }} />
);
}
Example - Custom draw
method
import {Canvas} from 'react-canvas-wrapper';
...
constructor(props) {
super(props);
this.draw = this.draw.bind(this);
}
draw(canvas) {
const node = ReactDOM.findDOMNode(canvas);
const context = node.getContext('2d');
if (!context) {
return;
}
const {
progress,
} = this.props;
const pixelRatio = window.devicePixelRatio || 1;
const width = 30 * pixelRatio;
const height = 30 * pixelRatio;
const backgroundColor = 'grey';
const color = 'black';
context.clearRect(0, 0, width, height);
context.fillStyle = backgroundColor;
context.beginPath();
context.arc(
(width / 2),
(height / 2),
(width / 2),
0,
Math.PI * 2
);
context.fill();
context.fillStyle = color;
context.beginPath();
context.arc(
(width / 2),
(height / 2),
((width * progress) / 2),
0,
Math.PI * 2
);
context.fill();
}
render() {
return (
<Canvas draw={this.draw} />
);
}
...
This component recognizes the devicePixelRatio
of the device/browser they are running
in, so the canvas is properly sized in order to keep the graphics crisp and clean, assuming that you haven’t set the pixelRatioAware
to false
.
So, feel free to set the size or dimensions based on a 1x
scale and the component
will adjust those accordingly.
Although, keep in mind that if you decide to pass in your own custom draw
function
you’ll have to account for the devicePixelRatio
within your drawing commands.
MIT © Ryan Hefner