canvasimo

Canvasimo

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

Installation

Install Canvasimo with npm (add --save to add to your package.json)

npm install canvasimo

...or download from GitHub

Getting started

Load Canvasimo

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)

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.

With an ES5 bundler / commonjs

var canvasimo = require('canvasimo');
var Canvasimo = canvasimo.Canvasimo;

As a global

<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;

Create a Canvasimo instance

// Get your canvas element
const element = document.getElementById('canvas');

// Create Canvasimo instance
const canvas = new Canvasimo(element);

Begin drawing

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()
  });

TypeScript support

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;