An HTML5 canvas drawing library, with 150+ useful methods, jQuery-like fluent interface, and cross-browser compatibility enhancements.
Full documentation and examples available on canvasimo.com
Install Canvasimo with npm (add
--save to add to your package.json)
npm install canvasimo
...or download from GitHub
Canvasimo can be bundled with all major build tools, or loaded with a script tag and used as a global
With an ES6 bundler / TypeScript (recommended)
Both of these will import the Canvasimo class as it is both a default and named export.
With an ES5 bundler / commonjs
var canvasimo = ;var Canvasimo = canvasimoCanvasimo;
As a global
Now Canvasimo is accessible globally like so (to allow for ES6 and TypeScript default imports)
Create a Canvasimo instance
// Get your canvas element;// Create Canvasimo instance;
Here's a simple chart example
;;;;;;;canvas// Set the canvas size.setSizewidth, height// Set some initial fill and stroke styles.setFill'black'.setStroke'black'.setStrokeWidth1// Setup fonts for the axis labels.setTextAlign'center'.setTextBaseline'middle'.setFontFamily'arial'.setFontSize10// Draw the axis lines.beginPath.strokeLinemargin, margin, margin, height - margin.beginPath.strokeLinemargin, height - margin, width - margin, height - margin// Draw the x axis labels.repeatstart, end,// Loop over our data.forEachdata,;
As of version
0.7.0 Canvasimo only officially supports TypeScript
3.1.6 and upwards.
Canvasimo may work with older versions of TypeScript, but due to a change in TypeScript's native lib types you will need to create a global type alias: