Overlapping backgrounds - approach

[3ddy]

Hello,
I want to create game in 16:9 ratio, but my actual clickable area would be 4:3 ratio (the rest is GUI).

I'm setting background color to blue using game.stage.backgroundColor BUT I would like to have my clickable area in different color, for example red. I know I can just put some image on that blue background, or draw some rectangle, but I'm thinking about the best approach looking at performance as well as assets weight. Any ideas?

[3ddy]

I've tried using Phaser.Rectangle but I had few problems:

1) The rectangle isn't scaling to take space of whole browser vertical area (only Phaser game area)
2)  I cant spawn objects on that rectangle, because it is always on top

 

drawGuiRectangles: function() {
		left = new Phaser.Rectangle(0, 0, 200, game.height);
		left.boundsPadding = 0;
		right = new Phaser.Rectangle(0, 0, 200, game.height);
		right.boundsPadding = 0;
		var someSprite = game.add.sprite(100,0, 'big');
	 },
	 render: function() {
		game.debug.geom(left, '#000000');
	 }