How to draw using canvas context?

[piedrahitac]

Hello everyone,

 

I'm trying to use the game canvas rendering context to draw some lines directly on the canvas element, however when I try to do it nothing happens. There's no errors in the console and absolutely nothing renders in the canvas, I just get a blank page.

 

Even trying super simple things like the code below gives me the same results.

MyGame.gameState.prototype = {    create: function () {        var ctx = this.game.context;        ctx.fillRect(20, 20, 150, 100);    },    update: function () {    },    quitGame: function (pointer) {    }};

Is there something wrong with the code, or something I'm missing?

 

I'm using Phaser 2.2.2, so I don't really know if what I'm trying to do is even possible, so any help is highly appreciated.

[ZeroGravity]

I am not sure if you should draw directly to canvas in phaser (like you would do with normal canvas). You should use phasers own methods to draw lines etc. See below, this example is taken from phaser examples (see section geometry):

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create, render: render });var floor;function create() {    floor = new Phaser.Rectangle(0, 550, 800, 50);}function render () {    game.debug.geom(floor,'#0fffff');}

[piedrahitac]

Thanks for your reply Zero!

The thing is that I'm drawing plenty of polygons per frame, so using Phaser own methods makes the performance take a big hit.

That's why I'm trying to use canvas directly.

[piedrahitac]

Ok, as was expected, it turned out I was doing things the wrong way...

 

I was using the Polygon class to create shapes instead of using the graphics element line and fill methods... Now the performance has improved a great deal and everything renders just fine in the canvas!