Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

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;

About

An HTML5 canvas drawing library, with 150+ useful methods, jQuery-like fluent interface, and cross-browser compatibility enhancements.

Topics

Resources

License

Packages

No packages published
You can’t perform that action at this time.