JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/phaser/2.0.6/phaser.min.js"></script>
   <div id="gameContainer" width="100%" height = "100%"> </div>

JavaScript

var game = new Phaser.Game(400, 400, Phaser.CANVAS, 'gameContainer', { preload: preload, create: create, update: null });

var bmd0, bmd1, bmd2
var img0, img1, img2;

function preload()
{

  	game.stage.backgroundColor = 0x123456;

  	
}


function create()
{
	bmd0 = game.make.bitmapData(400, 400);
	bmd0.fill(0,0,0)

	bmd1 = game.make.bitmapData(80, 80);
	bmd1.fill(255,0,0);
    bmd1.update();
   
    bmd1.processPixelRGB(this.convertGreyScale, this);
    bmd1.update();
    
	img0 = game.add.sprite(0,0, bmd0);
	img1 = game.add.sprite(30,30, bmd1);


}


function update()
{


}

function convertGreyScale(col)
{
    var r = col.r;
    var g = col.g;
    var b = col.b;

    var l = (r+g+b) * 0.33333333;
    
    col.r = l;
    col.g = l;
    col.b = l;

    return col;
}