class HeadsUpDisplay { constructor(game, camera) { this.player = null; this.hudCanvas = null; this.hudContext = null; } init(player, canvas) { this.player = player; this.hudCanvas = canvas; } update(delta) { } draw(context) { // context.strokeStyle = "white"; // context.lineWidth = 10; // context.beginPath(); // context.rect(5, 5, this.hudCanvas.width - 10, this.hudCanvas.height - 10); // context.stroke(); context.save(); context.translate(10, 10); var message = "2019 js13k 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(); */ } }