get-context

Chainable canvas context api wrapper.

Install

With Node.js:

$ npm install get-context

With Bower:

$ bower install get-context

API

getContext(element, type)

Creates an instance of a chainable canvas context api wrapper. The type argument may be '2d' or 'webgl'. Defaults to '2d'.

var canvas = document.createElement('canvas');
var context = require('get-context')(canvas);

context
    .set({
        strokeStyle: '#0000ff',
        lineCap: 'round'
    })
    .beginPath()
        .arc(75, 75, 50, 0, Math.PI * 2, true) // Outer circle
        .moveTo(110, 75)
        .arc(75, 75, 35, 0, Math.PI, false)    // Mouth (clockwise)
        .moveTo(65,65)
        .arc(60, 65, 5, 0, Math.PI * 2, true)  // Left eye
        .moveTo(95,65)
        .arc(90, 65, 5, 0, Math.PI * 2, true)  // Right eye
    .stroke();

.get(key)

Gets a single context property.

context.get('fillStyle');
// returns #000000

.get(array)

Gets multiple context properties.

context.get(['fillStyle', 'strokeStyle']);
// returns { fillStyle: '#000000', strokeStyle: '#000000' }

.set(key, value)

Sets a single context property.

context.set('fillStyle', '#FF0000');
// returns context

.set(object)

Sets multiple context properties.

context.set({
    fillStyle: '#FF0000',
    strokeStyle: '#00FF00'
});
// returns context

.resize(width, height)

Resizes the canvas element and rendering context respecting the device pixel ratio.

context.resize(1024, 768);
// returns context

.getPixelRatio()

Returns the current device pixel ratio, if available. Useful for handling responsive canvas elements and adjusting the current scale. Defaults to 1.

Test

$ npm test

© 2015 Shannon Moeller [email protected]

Licensed under MIT