--- layout: api title: "v1.6.1 API: L.TileLayer.Canvas" categories: api version: v1.6.1 permalink: /api/v1.6.1/l-tilelayer-canvas ---

## TileLayer.Canvas

Used to create Canvas-based tile layers where tiles get drawn on the browser side. Extends TileLayer.

### Usage example

    var canvasTiles = L.tileLayer.canvas();

    canvasTiles.drawTile = function(canvas, tilePoint, zoom) {
    	var ctx = canvas.getContext('2d');
    	// draw something on the tile canvas
    }

### Creation

Factory | Description
--- | ---
`L.tileLayer.canvas( <TileLayer options> options? )` | Instantiates a Canvas tile layer object given an options object (optionally).

### Options

Option | Type | Default | Description
--- | --- | --- | ---
`async` | `Boolean` | `false` | Indicates that tiles will be drawn asynchronously. tileDrawn method should be called for each tile after drawing completion.

### Methods

Method | Returns | Description
--- | --- | ---
`drawTile( <HTMLCanvasElement> canvas, <Point> tilePoint, <Number> zoom )` | `this` | You need to define this method after creating the instance to draw tiles; `canvas` is the actual canvas tile on which you can draw, `tilePoint` represents the tile numbers, and `zoom` is the current zoom.
`tileDrawn( <HTMLCanvasElement> canvas )` | - | If `async` option is defined, this function should be called for each tile after drawing completion. `canvas` is the same canvas element, that was passed to drawTile.