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
import Canvasimo from 'canvasimo'; // Or import { Canvasimo } from 'canvasimo';Both of these will import the Canvasimo class as it is both a default and named export.
var canvasimo = require('canvasimo'); var Canvasimo = canvasimo.Canvasimo;<script type="text/javascript" src="path/to/canvasimo.js">Now Canvasimo is accessible globally like so (to allow for ES6 and TypeScript default imports)
const Canvasimo = canvasimo.Canvasimo;// Get your canvas element const element = document.getElementById('canvas'); // Create Canvasimo instance const canvas = new Canvasimo(element);Here's a simple chart example
const margin = 20; const width = 600; const height = 200; const start = 0; const end = 11; const colors = ['red', 'green', 'blue']; const data = [ [3, 7, 2, 8, 3, 8, 5, 4, 4, 7], [7, 5, 6, 7, 8, 4, 5, 3, 2, 3], [9, 8, 7, 5, 3, 6, 4, 5, 2, 5] ]; canvas // Set the canvas size .setSize(width, height) // Set some initial fill and stroke styles .setFill('black') .setStroke('black') .setStrokeWidth(1) // Setup fonts for the axis labels .setTextAlign('center') .setTextBaseline('middle') .setFontFamily('arial') .setFontSize(10) // Draw the axis lines .beginPath() .strokeLine(margin, margin, margin, height - margin) .beginPath() .strokeLine(margin, height - margin, width - margin, height - margin) // Draw the x axis labels .repeat(start, end, (index) => { canvas .fillText(index, margin / 2, height - margin - (height - margin * 2) / 10 * index) }) // Loop over our data .forEach(data, (dataSet, index) => { const verticalScale = (height - margin * 2) / (end - 1); const horizontalScale = (width - margin * 2) / (dataSet.length - 1); // Map our values to our chart area const values = dataSet.map((value, index) => [index * horizontalScale, -value * verticalScale]); canvas // Save the current canvas state .save() // Move to the bottom left corner of the chart area .translate(margin, height - margin) // Draw a data set as a path .beginPath() .strokePath(values, colors[index]) // Restore canvas to its previous state .restore() });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:
type Canvas2DContextAttributes = CanvasRenderingContext2DSettings;