#

API Docs for:
Show: Inherited Protected Private Deprecated

# LGraphCanvas Class

Defined in: `../src/litegraph.js:4164`

marks as dirty the canvas, this way it will be rendered again

## Constructor

### `LGraphCanvas`

(

- `canvas`
- `graph`
- `options`

)

Defined in `../src/litegraph.js:4164`

#### Parameters:

- `canvas` HTMLCanvas

  the canvas where you want to render (it accepts a selector in string format or the canvas element itself)

- `graph` LGraph

  [optional]

- `options` Object

  [optional] { skip_rendering, autoresize }

- Index
- Methods

## Item Index

### Methods

- adjustMouseEvent
- bindEvents
- bringToFront
- centerOnNode
- clear
- closeSubgraph
- computeVisibleNodes
- convertCanvasToOffset
- convertOffsetToCanvas
- deleteSelectedNodes
- deselectAllNodes
- deselectNode
- draw
- drawBackCanvas
- drawConnections
- drawFrontCanvas
- drawGroups
- drawNode
- drawNodeShape
- drawNodeWidgets
- enableWebGL
- getCanvasWindow
- isOverNodeBox
- isOverNodeInput
- openSubgraph
- processDrop
- processKey
- processMouseMove
- processMouseUp
- processMouseWheel
- processNodeWidgets
- renderInfo
- renderLink
- resize
- selectNode
- selectNodes
- sendToBack
- setCanvas
- setGraph
- setZoom
- startRendering
- stopRendering
- switchLiveMode
- unbindEvents

## Methods

### `adjustMouseEvent`

()

Defined in `../src/litegraph.js:5319`

adds some useful properties to a mouse event, like the position in graph coordinates

### `bindEvents`

()

Defined in `../src/litegraph.js:4038`

binds mouse, keyboard, touch and drag events to the canvas

### `bringToFront`

()

Defined in `../src/litegraph.js:5403`

brings a node to front (above all other nodes)

### `centerOnNode`

()

Defined in `../src/litegraph.js:5308`

centers the camera on a given node

### `clear`

()

Defined in `../src/litegraph.js:3837`

clears all the data inside

### `closeSubgraph`

(

- `assigns`

)

Defined in `../src/litegraph.js:3938`

closes a subgraph contained inside a node

#### Parameters:

- `assigns` LGraph

  a graph

### `computeVisibleNodes`

()

Defined in `../src/litegraph.js:5436`

checks which nodes are visible (inside the camera area)

### `convertCanvasToOffset`

()

Defined in `../src/litegraph.js:5387`

converts a coordinate from Canvas2D coordinates to graph space

### `convertOffsetToCanvas`

()

Defined in `../src/litegraph.js:5378`

converts a coordinate from graph coordinates to canvas2D coordinates

### `deleteSelectedNodes`

()

Defined in `../src/litegraph.js:5291`

deletes all nodes in the current selection from the graph

### `deselectAllNodes`

()

Defined in `../src/litegraph.js:5268`

removes all nodes from the current selection

### `deselectNode`

()

Defined in `../src/litegraph.js:5242`

removes a node from the current selection

### `draw`

()

Defined in `../src/litegraph.js:5461`

renders the whole canvas content, by rendering in two separated canvas, one containing the background grid and the connections, and one containing the nodes)

### `drawBackCanvas`

()

Defined in `../src/litegraph.js:5659`

draws the back canvas (the one containing the background and the connections)

### `drawConnections`

()

Defined in `../src/litegraph.js:6311`

draws every connection visible in the canvas OPTIMIZE THIS: precatch connections position instead of recomputing them every time

### `drawFrontCanvas`

()

Defined in `../src/litegraph.js:5488`

draws the front canvas (the one containing all the nodes)

### `drawGroups`

()

Defined in `../src/litegraph.js:6924`

draws every group area in the background

### `drawNode`

()

Defined in `../src/litegraph.js:5807`

draws the given node inside the canvas

### `drawNodeShape`

()

Defined in `../src/litegraph.js:6115`

draws the shape of the given node in the canvas

### `drawNodeWidgets`

()

Defined in `../src/litegraph.js:6663`

draws the widgets stored inside a node

### `enableWebGL`

()

Defined in `../src/litegraph.js:4138`

this function allows to render the canvas using WebGL instead of Canvas2D this is useful if you plant to render 3D objects inside your nodes, it uses litegl.js for webgl and canvas2DtoWebGL to emulate the Canvas2D calls in webGL

### `getCanvasWindow`

() Window

Defined in `../src/litegraph.js:4180`

Used to attach the canvas in a popup

#### Returns:

Window:

returns the window where the canvas is attached (the DOM root node)

### `isOverNodeBox`

()

Defined in `../src/litegraph.js:4876`

retuns true if a position (in graph space) is on top of a node little corner box

### `isOverNodeInput`

()

Defined in `../src/litegraph.js:4888`

retuns true if a position (in graph space) is on top of a node input slot

### `openSubgraph`

(

- `graph`

)

Defined in `../src/litegraph.js:3911`

opens a graph contained inside a node in the current graph

#### Parameters:

- `graph` LGraph

### `processDrop`

()

Defined in `../src/litegraph.js:5074`

process a item drop event on top the canvas

### `processKey`

()

Defined in `../src/litegraph.js:4917`

process a key event

### `processMouseMove`

()

Defined in `../src/litegraph.js:4501`

Called when a mouse move event has to be processed

### `processMouseUp`

()

Defined in `../src/litegraph.js:4675`

Called when a mouse up event has to be processed

### `processMouseWheel`

()

Defined in `../src/litegraph.js:4847`

Called when a mouse wheel event has to be processed

### `processNodeWidgets`

()

Defined in `../src/litegraph.js:6813`

process an event on widgets

### `renderInfo`

()

Defined in `../src/litegraph.js:5632`

draws some useful stats in the corner of the canvas

### `renderLink`

(

- `a`
- `b`
- `link`
- `skip_border`
- `flow`
- `color`
- `start_dir`
- `end_dir`
- `num_sublines`

)

Defined in `../src/litegraph.js:6398`

draws a link between two points

#### Parameters:

- `a` Vec2

  start pos

- `b` Vec2

  end pos

- `link` Object

  the link object with all the link info

- `skip_border` Boolean

  ignore the shadow of the link

- `flow` Boolean

  show flow animation (for events)

- `color` String

  the color for the link

- `start_dir` Number

  the direction enum

- `end_dir` Number

  the direction enum

- `num_sublines` Number

  number of sublines (useful to represent vec3 or rgb)

### `resize`

()

Defined in `../src/litegraph.js:6979`

resizes the canvas to a given size, if no size is passed, then it tries to fill the parentNode

### `selectNode`

()

Defined in `../src/litegraph.js:5192`

selects a given node (or adds it to the current selection)

### `selectNodes`

()

Defined in `../src/litegraph.js:5204`

selects several nodes (or adds them to the current selection)

### `sendToBack`

()

Defined in `../src/litegraph.js:5416`

sends a node to the back (below all other nodes)

### `setCanvas`

(

- `assigns`

)

Defined in `../src/litegraph.js:3961`

assigns a canvas

#### Parameters:

- `assigns` Canvas

  a canvas (also accepts the ID of the element (not a selector)

### `setGraph`

(

- `graph`

)

Defined in `../src/litegraph.js:3880`

assigns a graph, you can reasign graphs to the same canvas

#### Parameters:

- `graph` LGraph

### `setZoom`

()

Defined in `../src/litegraph.js:5347`

changes the zoom level of the graph (default is 1), you can pass also a place used to pivot the zoom

### `startRendering`

()

Defined in `../src/litegraph.js:4194`

starts rendering the content of the canvas when needed

### `stopRendering`

()

Defined in `../src/litegraph.js:4218`

stops rendering the content of the canvas (to save resources)

### `switchLiveMode`

()

Defined in `../src/litegraph.js:7002`

switches to live mode (node shapes are not rendered, only the content) this feature was designed when graphs where meant to create user interfaces

### `unbindEvents`

()

Defined in `../src/litegraph.js:4090`

unbinds mouse events from the canvas