# Class: Canvas

## Phaser. Canvas

#### new Canvas()

  The Canvas class handles everything related to creating the `canvas` DOM tag that Phaser will use, including styles, offset and aspect ratio.

  Source:
    - system/Canvas.js, line 3

### Methods

#### <static> addToDOM(canvas, parent, overflowHidden) → {HTMLCanvasElement}

  Adds the given canvas element to the DOM. The canvas will be added as a child of the given parent. If no parent is given it will be added as a child of the document.body.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `canvas` | HTMLCanvasElement |  |  | The canvas to set the touch action on.
  `parent` | string | HTMLElement |  |  | The DOM element to add the canvas to.
  `overflowHidden` | boolean | <optional> | true | If set to true it will add the overflow='hidden' style to the parent DOM element.

  Source:
    - system/Canvas.js, line 166

  ##### Returns:

  Returns the source canvas.

  Type
    HTMLCanvasElement

#### <static> create(width, height, id, noCocoon) → {HTMLCanvasElement}

  Creates a `canvas` DOM element. The element is not automatically added to the document.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `width` | number | <optional> | 256 | The width of the canvas element.
  `height` | number | <optional> | 256 | The height of the canvas element..
  `id` | string | <optional> | '' | If given this will be set as the ID of the canvas element, otherwise no ID will be set.
  `noCocoon` | boolean | <optional> | false | CocoonJS only allows 1 screencanvas object, which should be your game. If you need to create another canvas (i.e. for a texture) set this to 'true'.

  Source:
    - system/Canvas.js, line 15

  ##### Returns:

  The newly created canvas element.

  Type
    HTMLCanvasElement

#### <static> getAspectRatio(canvas) → {number}

  Returns the aspect ratio of the given canvas.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `canvas` | HTMLCanvasElement | The canvas to get the aspect ratio from.

  Source:
    - system/Canvas.js, line 93

  ##### Returns:

  The ratio between canvas' width and height.

  Type
    number

#### <static> getOffset(element, point) → {Phaser.Point}

  Get the DOM offset values of any given element

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `element` | HTMLElement |  | The targeted element that we want to retrieve the offset.
  `point` | Phaser.Point | <optional> | The point we want to take the x/y values of the offset.

  Source:
    - system/Canvas.js, line 55

  ##### Returns:

  - A point objet with the offsetX and Y as its properties.
  Type
    Phaser.Point

#### <static> setBackgroundColor(canvas, color) → {HTMLCanvasElement}

  Sets the background color behind the canvas. This changes the canvas style property.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `canvas` | HTMLCanvasElement |  | The canvas to set the background color on.
  `color` | string | <optional> | The color to set. Can be in the format 'rgb(r,g,b)', or '#RRGGBB' or any valid CSS color.

  Source:
    - system/Canvas.js, line 104

  ##### Returns:

  Returns the source canvas.

  Type
    HTMLCanvasElement

#### <static> setImageRenderingBicubic(canvas) → {HTMLCanvasElement}

  Sets the CSS image-rendering property on the given canvas to be 'bicubic' (aka 'auto'). Note that if this doesn't given the desired result then see the CanvasUtils.setSmoothingEnabled method.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `canvas` | HTMLCanvasElement | The canvas to set image-rendering bicubic on.

  Source:
    - system/Canvas.js, line 279

  ##### Returns:

  Returns the source canvas.

  Type
    HTMLCanvasElement

#### <static> setImageRenderingCrisp(canvas) → {HTMLCanvasElement}

  Sets the CSS image-rendering property on the given canvas to be 'crisp' (aka 'optimize contrast on webkit'). Note that if this doesn't given the desired result then see the setSmoothingEnabled.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `canvas` | HTMLCanvasElement | The canvas to set image-rendering crisp on.

  Source:
    - system/Canvas.js, line 258

  ##### Returns:

  Returns the source canvas.

  Type
    HTMLCanvasElement

#### <static> setSmoothingEnabled(context, value) → {CanvasRenderingContext2D}

  Sets the Image Smoothing property on the given context. Set to false to disable image smoothing. By default browsers have image smoothing enabled, which isn't always what you visually want, especially when using pixel art in a game. Note that this sets the property on the context itself, so that any image drawn to the context will be affected. This sets the property across all current browsers but support is patchy on earlier browsers, especially on mobile.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `context` | CanvasRenderingContext2D | The context to enable or disable the image smoothing on.
  `value` | boolean | If set to true it will enable image smoothing, false will disable it.

  Source:
    - system/Canvas.js, line 234

  ##### Returns:

  Returns the source context.

  Type
    CanvasRenderingContext2D

#### <static> setTouchAction(canvas, value) → {HTMLCanvasElement}

  Sets the touch-action property on the canvas style. Can be used to disable default browser touch actions.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `canvas` | HTMLCanvasElement |  | The canvas to set the touch action on.
  `value` | String | <optional> | The touch action to set. Defaults to 'none'.

  Source:
    - system/Canvas.js, line 122

  ##### Returns:

  The source canvas.

  Type
    HTMLCanvasElement

#### <static> setTransform(context, translateX, translateY, scaleX, scaleY, skewX, skewY) → {CanvasRenderingContext2D}

  Sets the transform of the given canvas to the matrix values provided.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `context` | CanvasRenderingContext2D | The context to set the transform on.
  `translateX` | number | The value to translate horizontally by.
  `translateY` | number | The value to translate vertically by.
  `scaleX` | number | The value to scale horizontally by.
  `scaleY` | number | The value to scale vertically by.
  `skewX` | number | The value to skew horizontaly by.
  `skewY` | number | The value to skew vertically by.

  Source:
    - system/Canvas.js, line 213

  ##### Returns:

  Returns the source context.

  Type
    CanvasRenderingContext2D

#### <static> setUserSelect(canvas, value) → {HTMLCanvasElement}

  Sets the user-select property on the canvas style. Can be used to disable default browser selection actions.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `canvas` | HTMLCanvasElement |  | The canvas to set the touch action on.
  `value` | String | <optional> | The touch action to set. Defaults to 'none'.

  Source:
    - system/Canvas.js, line 142

  ##### Returns:

  The source canvas.

  Type
    HTMLCanvasElement