35 Canvas Examples
FlameChart: Flamechart component (based on Chrome DevTools) with standalone support. Interesting color-handling code.
react music: Make dope beats with React. Spectrum analyzer using WebAudio API, Canvas. Song has tempo, sequencers, audio samples.
pabla: Image Editor with download. Shows a custom renderer for declarative JSX with Canvas.
npm trends: Compare npm package download counts over time. Homegrown canvas charts.
Djenerator: Generates metal riffs/breakdowns. Web Audio API.
ManyGolf: Fun, Massively multiplayer procedurally-generated 2d golf. Canvas, Redux, Typescript.
react sketchpad: Canvas drawing. Tools include Line, Ellipse, Pencil, Rectangle. Can optionally synch via Websockets.
morphin: Animated sprite generator for morphing between images. Image upload, CSS gen/download.
linked highlighting vega redux: Linked hilighting between line chart, radial heatmap. Uses Vega: a declarative visualisation grammar. Voroni transforms for mouse tracking.
react gridview examples: Spreadsheet component. Tab, Enter keys work as expected. Uses Canvas, Typescript.
tweety: Fun twitter dot portrait. Uses D3 CSV parsing, fisheye lens effect.
react komik: Comic strip creator using fabric.js canvas rendering.
redux cropper: Image cropper in redux: rotation, zoom, fixed/dynamic aspect ratio. Uses reselect for intelligent caching. Port from fengyuanchen/cropper.
Reacteroids: Asteroids in Canvas. Does inertia, collision detection, velocity, rotation using Math.sin / cos. ES6 classes.
react three renderer example: Render into a three.js canvas using React. Demos include dragging, cloth and wind. Can inspect with React DevTools.
floppybox: Flappybird clone using Phaser.io. Not much code at all.
circuitsim: Interactive circuit simulator (WIP). Uses ramda, redux, react-art.
Shape interpolation: React-motion + React-canvas, interpolating between shapes.
hex demo: Resizable hexagonal grid, useful for games. Uses React-art surface, Path, Shape.
react pong: Canvas-based Pong implementation. Ball/player classes provide update() and draw() methods.
WRDebug (Browser Only)
: ✅ Pre-render cache hit. |