Last active
July 29, 2023 01:44
-
-
Save JobLeonard/987731e86b473d42cd1885e70eed616a to your computer and use it in GitHub Desktop.
A react component that wraps and autosizes a canvas element
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, {PropTypes} from 'react'; | |
| // A simple helper component, wrapping retina logic for canvas. | |
| // Expects a "painter" function that takes a "context" to draw on. | |
| // This will draw on the canvas whenever the component updates. | |
| export class Canvas extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| this.fitToZoomAndPixelRatio = this.fitToZoomAndPixelRatio.bind(this); | |
| this.draw = this.draw.bind(this); | |
| } | |
| // Make sure we get a sharp canvas on Retina displays | |
| // as well as adjust the canvas on zoomed browsers | |
| fitToZoomAndPixelRatio() { | |
| let el = this.refs.canvas; | |
| if (el) { | |
| let context = el.getContext('2d'); | |
| const ratio = window.devicePixelRatio || 1; | |
| el.width = el.parentNode.clientWidth * ratio; | |
| el.height = el.parentNode.clientHeight * ratio; | |
| context.mozImageSmoothingEnabled = false; | |
| context.webkitImageSmoothingEnabled = false; | |
| context.msImageSmoothingEnabled = false; | |
| context.imageSmoothingEnabled = false; | |
| context.scale(ratio, ratio); | |
| context.clearRect(0, 0, el.width, el.height); | |
| } | |
| } | |
| draw() { | |
| let el = this.refs.canvas; | |
| if (el) { | |
| this.fitToZoomAndPixelRatio(); | |
| let context = el.getContext('2d'); | |
| this.props.paint(context, el.clientWidth, el.clientHeight); | |
| } | |
| } | |
| componentDidMount() { | |
| this.draw(); | |
| window.addEventListener("resize", this.draw); | |
| } | |
| componentDidUpdate() { | |
| this.draw(); | |
| } | |
| render() { | |
| return ( | |
| <div style={{ | |
| flex: '1 1 auto', | |
| margin: 0, | |
| padding: 0, | |
| border: 0, | |
| }}> | |
| <canvas | |
| ref='canvas' | |
| style={{ display: 'block', width: '100%', height: '100%' }} | |
| /> | |
| </div> | |
| ); | |
| } | |
| } | |
| Canvas.propTypes = { | |
| paint: PropTypes.func.isRequired, | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Will this work for drawing an image on the canvas? e.g. context.drawImage(base_image, 0, 0);
I don't understand why the prototype had to be extended with circle, testSize, etc. Does it need a drawImage?