react-responsive-canvas
v1.0.2
Published
[![npm](https://badgen.now.sh/npm/v/react-responsive-canvas)](https://www.npmjs.com/package/react-responsive-canvas)
Downloads
231
Maintainers
Readme
react-responsive-canvas
Simple React component for a canvas that fits the size of its parent.
Installation
npm install --save react-responsive-canvas
Usage
Props
canvasRef: (el: HTMLCanvasElement) => void
- A ref callback function to set a reference to thecanvas
elementonResize: () => void
- A callback for when the canvas resizesscale: number
- A ratio to scale the canvas by. Used to support high-quality canvases on retina screens. Defaults towindow.devicePixelRatio
Example
import Canvas from 'react-responsive-canvas';
class App extends Component {
componentDidMount() {
this.ctx = this.canvas.getContext('2d');
this.draw();
}
draw() {
// Draw whatever
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
}
render () {
return (
<div>
<Canvas
canvasRef={el => (this.canvas = el)}
handleResize={this.draw} />
</div>
);
}
}
Context
By default, HTML <canvas />
elements are a fixed size. When creating animated canvas graphics, I usually want the canvas to take the shape of the container it sits in — whether that's the whole page, or a header image.
After writing this component too many times using hughsk/canvas-fit, I built this module.
It auto-resizes the canvas to fill it's container, and by default scales the canvas to match the user's screen resolution (ie. regular vs. retina screens).
License
MIT