get-context

`get-context`

Chainable canvas context api wrapper.

Install

$ 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.