Nocturnal Pumpkin Maelstrom

    canteen

    1.0.5 • Public • Published
     ____                     __                            
    /\  _`\                  /\ \__                         
    \ \ \/\_\     __      ___\ \ ,_\    __     __    ___    
     \ \ \/_/_  /'__`\  /' _ `\ \ \/  /'__`\ /'__`\/' _ `\  
      \ \ \L\ \/\ \L\.\_/\ \/\ \ \ \_/\  __//\  __//\ \/\ \ 
       \ \____/\ \__/.\_\ \_\ \_\ \__\ \____\ \____\ \_\ \_\
        \/___/  \/__/\/_/\/_/\/_/\/__/\/____/\/____/\/_/\/_/
    

    Overview

    Canteen is an open source JavaScript library which makes it super easy to test canvas outputs in a cross browser, and cross browser version way. The name "Canteen" is obtained by shortening the phrase "Canvas in Test Environments".

    Features

    • All drawing instructions are recorded as a stack data structure, including method calls and attribute changes
    • Developers can access the stack via context.stack(), context.json(), or context.hash()
    • Developers can capture instructions in a strict mode or loose mode. Strict mode captures method calls and arguments, as well as property changes and values. Loose mode only captures method calls and property changes. Use strict mode if you care about the arguments and values, and use loose mode if you just care about the sequence of drawing instructions.
    • Developers can round numeric values from method parameters or property values by setting the decimalPoints property to a number like 2, 1, or 0. A value of 0 means that all numeric values are rounded to the nearest integer

    Examples

    <script src="canteen.min.js"></script>
    var canvas = document.getElementById('canvas');
    // when getContext() is called, Canteen automatically instantiates
    // and returns a Canteen canvas context wrapper
    var context = canvas.getContext('2d');
        
    // draw stuff
    context.beginPath();
    context.arc(50, 50, 30, 0, Math.PI * 2, false);
    context.fillStyle = 'red';
    context.fill();
     
    // return a strict array of the instruction stack
    var stack = context.stack(); 
     
    // return a strict json string of the instruction stack, i.e. [{"method":"beginPath","arguments":[]},{"method":"arc","arguments":[50,50,30,0,6.283,false]},{"attr":"fillStyle","val":"red"},{"method":"fill","arguments":[]}] 
    var json = context.json();
     
    // return a strict md5 hash of the instruction stack, i.e. "ae4a4d42eb0d3701ab31125bf2cb2ba8"
    var hash = context.hash();
     
    // return a loose array of the instruction stack
    var stack = context.stack({
      loose: true
    }); 
     
    // return a loose json string of the instruction stack, i.e. ["beginPath","arc","fillStyle","fill"]
    var json = context.json({
      loose: true
    }); 
     
    // return a loose md5 hash of the instruction stack, i.e. "7f2734b2c8027e5f8a1429e83361cb5c"
    var hash = context.hash({
      loose: true
    }); 
     
    // return json string of the instruction stack with numeric values rounded to 2 decimal points (the default is 3)
    var json = context.json({
      decimalPoints: 2
    }); 
     
    // return json string of the instruction stack with numeric values rounded to integers
    var json = context.json({
      decimalPoints: 0
    }); 
     
    // example unit test assertion
    assert.equal(context.hash(), 'ae4a4d42eb0d3701ab31125bf2cb2ba8'); // test passes
     
    // clear the stack
    context.clear();

    Keywords

    none

    Install

    npm i canteen

    DownloadsWeekly Downloads

    412

    Version

    1.0.5

    License

    Apache

    Last publish

    Collaborators

    • bharathm03