❤Neoclassical Programming Multitude

npm

log inorsign up
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    get-contextpublic

    get-context

    NPM version Downloads Build Status Tip

    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 me@shannonmoeller.com

    Licensed under MIT

    Keywords

    install

    npm i get-context

    Downloadslast 7 days

    1

    version

    1.2.0

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar

    test in your browser