An HTML5 canvas drawing library, with 150+ useful methods, jQuery-like fluent interface, and cross-browser compatibility enhancements.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.vscode
docs/src
scripts
src
tests
types
.gitignore
.npmignore
.nvmrc
CNAME
LICENSE.txt
README.md
package-lock.json
package.json
tsconfig.json
tslint.json

README.md

Canvasimo CircleCI

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