Skip to content

Canvas texture


Canvas texture stored in texture cache, built-in object of phaser.

  • Author: Richard Davey


Create canvas texture

var texture = scene.textures.createCanvas(key, width, height);

Get canvas element

var canvas = texture.getCanvas();
var context = texture.getContext();

Canvas api

Draw frame

texture.drawFrame(key, frame, x, y);


texture.clear(x, y, width, height);

Refresh texture



  • Set
    texture.setPixel(x, y, red, green, blue);
    // texture.setPixel(x, y, red, green, blue, alpha);
  • Get
    var color = texture.getPixel(x, y);
    // var color = texture.getPixel(x, y, color);
    var colors = texture.getPixels(x, y, width, height);
    • colors : [{x, y, color, alpha}, ...]

Image data

  • Set
    texture.putData(imageData, x, y);
  • Get
    var imageData = texture.getData(x, y, width, height);

Add frame

texture.add(name, sourceIndex, x, y, width, height);
  • name : The name of this Frame. The name is unique within the Texture.
  • sourceIndex : The index of the TextureSource that this Frame is a part of.
  • x : The x coordinate of the top-left of this Frame.
  • y : The y coordinate of the top-left of this Frame.
  • width : The width of this Frame.
  • height : The height of this Frame.