<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

## Canvas

You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][1]

```js
const editor = grapesjs.init({
 canvas: {
   // options
 }
})
```

Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance

```js
const canvas = editor.Canvas;
```

-   [getConfig][2]
-   [getElement][3]
-   [getFrameEl][4]
-   [getWindow][5]
-   [getDocument][6]
-   [getBody][7]
-   [setCustomBadgeLabel][8]
-   [hasFocus][9]
-   [scrollTo][10]
-   [setZoom][11]
-   [getZoom][12]

## getConfig

Get the configuration object

Returns **[Object][13]** 

## getElement

Get the canvas element

Returns **[HTMLElement][14]** 

## getFrameEl

Get the iframe element of the canvas

Returns **[HTMLIFrameElement][15]** 

## getWindow

Get the window instance of the iframe element

Returns **[Window][16]** 

## getDocument

Get the document of the iframe element

Returns **HTMLDocument** 

## getBody

Get the body of the iframe element

Returns **[HTMLBodyElement][17]** 

## setCustomBadgeLabel

Set custom badge naming strategy

### Parameters

-   `f` **[Function][18]** 

### Examples

```javascript
canvas.setCustomBadgeLabel(function(component){
 return component.getName();
});
```

## getRect

Get canvas rectangular data

Returns **[Object][13]** 

## hasFocus

Check if the canvas is focused

Returns **[Boolean][19]** 

## scrollTo

Scroll canvas to the element if it's not visible. The scrolling is
executed via `scrollIntoView` API and options of this method are
passed to it. For instance, you can scroll smoothly by using
`{ behavior: 'smooth' }`.

### Parameters

-   `el` **([HTMLElement][14] | Component)** 
-   `opts` **[Object][13]** Options, same as options for `scrollIntoView` (optional, default `{}`)
    -   `opts.force` **[Boolean][19]** Force the scroll, even if the element is already visible (optional, default `false`)

### Examples

```javascript
const selected = editor.getSelected();
// Scroll smoothly (this behavior can be polyfilled)
canvas.scrollTo(selected, { behavior: 'smooth' });
// Force the scroll, even if the element is alredy visible
canvas.scrollTo(selected, { force: true });
```

## setZoom

Set zoom value

### Parameters

-   `value` **[Number][20]** The zoom value, from 0 to 100

Returns **this** 

## getZoom

Get zoom value

Returns **[Number][20]** 

## addFrame

Add new frame to the canvas

### Parameters

-   `props` **[Object][13]** Frame properties (optional, default `{}`)
-   `opts`   (optional, default `{}`)

### Examples

```javascript
editor.Canvas.addFrame({
name: 'Mobile home page',
x: 100, // Position in canvas
y: 100,
width: 500, // Frame dimensions
height: 600,
// device: 'DEVICE-ID',
components: [
'<h1 class="testh">Title frame</h1>',
'<p class="testp">Paragraph frame</p>',
],
styles: `
.testh { color: red; }
.testp { color: blue; }
`,
});
```

Returns **Frame** 

[1]: https://github.com/artf/grapesjs/blob/master/src/canvas/config/config.js

[2]: #getconfig

[3]: #getelement

[4]: #getframeel

[5]: #getwindow

[6]: #getdocument

[7]: #getbody

[8]: #setcustombadgelabel

[9]: #hasfocus

[10]: #scrollto

[11]: #setzoom

[12]: #getzoom

[13]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

[14]: https://developer.mozilla.org/docs/Web/HTML/Element

[15]: https://developer.mozilla.org/docs/Web/API/HTMLIFrameElement

[16]: https://developer.mozilla.org/docs/Web/API/Window

[17]: https://developer.mozilla.org/docs/Web/HTML/Element/body

[18]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function

[19]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean

[20]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
