Chainable canvas context api wrapper.
With Node.js:
$ npm install get-context
With Bower:
$ bower install get-context
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();
Gets a single context property.
context.get('fillStyle');
// returns #000000
Gets multiple context properties.
context.get(['fillStyle', 'strokeStyle']);
// returns { fillStyle: '#000000', strokeStyle: '#000000' }
Sets a single context property.
context.set('fillStyle', '#FF0000');
// returns context
Sets multiple context properties.
context.set({
fillStyle: '#FF0000',
strokeStyle: '#00FF00'
});
// returns context
Resizes the canvas element and rendering context respecting the device pixel ratio.
context.resize(1024, 768);
// returns context
Returns the current device pixel ratio, if available. Useful for handling responsive canvas elements and adjusting the current scale. Defaults to 1
.
$ npm test
MIT © Shannon Moeller