# Network - canvas

Handles the HTML part of the canvas.

### Options

The options for the canvas have to be contained in an object titled 'canvas'.

Click on the options shown to show how these options are supposed to be used.

    var options = {
      canvas:{
        width:'100%',  // other format: '400px'
        height:'100%',
        autoResize: true
      }
    }

    network.setOptions(options);

All of the individual options are explained here:

name | type | default | description
width | String | `'100%'` | the width of the canvas. Can be in percentages or pixels (ie. `'400px'`).
height | String | `'100%'` | the height of the canvas. Can be in percentages or pixels (ie. `'400px'`).
autoResize | Boolean | `true` | If true, the Network will automatically detect when its container is resized, and redraw itself accordingly. If false, the Network can be forced to repaint after its container has been resized using the function redraw() and setSize().

### Methods

This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.

name | returns | description
setSize( `String width`, `String height` ) | none | Set the size of the canvas. This is automatically done on a window resize.
canvasToDOM({ `x: Number`, `y: Number` }) | Object | This function converts canvas coordinates to coordinates on the DOM. Input and output are in the form of `{x:Number,y:Number}`. The DOM values are relative to the network container.
DOMtoCanvas({ `x: Number`, `y: Number` }) | Object | This function converts DOM coordinates to coordinates on the canvas. Input and output are in the form of `{x:Number,y:Number}`. The DOM values are relative to the network container.

### Events

This is a list of all the events in the public API. They are collected here from all individual modules.

name | properties | description
resize |
    {
      width: Number     // the new width  of the canvas
      height: Number    // the new height of the canvas
      oldWidth: Number  // the old width  of the canvas
      oldHeight: Number // the old height of the canvas
    }
| Fired when the size of the canvas has been resized, either by a redraw call when the container div has changed in size, a setSize() call with new values or a setOptions() with new width and/or height values.