Drawing on canvas
Drawing on canvas is possible through phaser.js using the same functions and properties as we used in core JavaScript. Here is an output:
How to do it…
The HTML code is as follows:
<html>
<head>
<meta charset="UTF-8" />
<title>The Canvas Drawing</title>
<script src="../phaser-master/build/phaser.min.js"></script>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { render: render});
function render()
{
game.context.fillStyle = 'rgb(255,0,0)';
game.context.beginPath();
game.context.linewidth=10;
game.context.fillRect(game.width/2-10,game.height/2-50,100,100);
game.context.fillRect(game.width/2-40,game.height/2-150,100,100);
game.context.fillRect(game.width/2-100,game.height/2,100,100);
game.context.closePath();
}
</script>
</body>...
