function HeadsUpDisplay(game, camera) { this.player = null; this.hudCanvas = null; this.hudContext = null; this.init = function(player, canvas) { this.player = player; this.canvas = canvas; } this.update = function(delta) { } this.draw = function(context) { context.save(); context.translate(5, 5); var message = "2018 JS 13k Game"; context.font = "16px sans-serif"; context.textAlign = "left"; context.textBaseline = "top"; context.fillStyle = "#DDDDDD"; context.strokeStyle = "#333333"; context.lineWidth = 2; var textMetrics = context.measureText(message); var textWidth = textMetrics.width; context.fillText(message, 0, 0); context.restore(); /* context.save(); context.translate(this.player.position.x + camera.position.x, this.player.position.y + camera.position.y); context.font = "16px sans-serif"; context.textAlign = "center"; context.textBaseline = "middle"; context.fillStyle = "#DDDDDD"; context.strokeStyle = "#333333"; context.lineWidth = 2; //var message = this.player.playerName + " " + this.player.id; //var textMetrics = context.measureText(message); //var textWidth = textMetrics.width; //context.fillText(message, 0, 0); var message = parseInt(this.player.position.x) + ", " + parseInt(this.player.position.y); var textMetrics = context.measureText(message); var textWidth = textMetrics.width; context.fillText(message, 0, 0); context.restore(); */ } };