From b8ed2098543e13f516ba2e99a99ab290f2125eb6 Mon Sep 17 00:00:00 2001
From: zenoamaro <zenoamaro@gmail.com>
Date: Sun, 30 Jun 2019 03:23:30 +0200
Subject: [PATCH] Draw text char by char

---
 constants.js |  3 +++
 gfx.js       | 22 ++++++++++++++++++----
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/constants.js b/constants.js
index 9398b1c..eed63ef 100644
--- a/constants.js
+++ b/constants.js
@@ -52,3 +52,6 @@ export const PARTICLE_FADE_AMOUNT = 1;
 
 export const MAX_EXPLOSION_SHAKE_FACTOR = 60;
 export const EXPLOSION_SHAKE_REDUCTION_FACTOR = 7;
+
+export const FONT_WIDTH = 3;
+export const FONT_HEIGHT = 5;
diff --git a/gfx.js b/gfx.js
index bdb3e69..c20415c 100644
--- a/gfx.js
+++ b/gfx.js
@@ -1,5 +1,6 @@
 import {splitWords} from './utils.js';
 import {parable} from './math.js';
+import {FONT_HEIGHT, FONT_WIDTH} from './constants.js';
 
 export function createCanvas(width, height) {
   const canvas = document.createElement('canvas');
@@ -87,12 +88,25 @@ export function drawCircle(ctx, x, y, r, color) {
 export function drawText(ctx, text, x, y, color, align='left', baseline='top') {
   x = Math.round(x); y = Math.round(y);
   ctx.font = '5px text';
-  ctx.textBaseline = baseline;
-  ctx.textAlign = align;
+  ctx.textBaseline = 'top';
+  ctx.textAlign = 'left';
   ctx.fillStyle = color;
   ctx.strokeStyle = 'black';
-  ctx.strokeText(text, x, y);
-  ctx.fillText(text, x, y);
+  const length = (text.length * FONT_WIDTH) + (text.length -1);
+  const left = (
+    align === 'right' ? x - length :
+    align === 'center' ? x - Math.round(length /2) :
+    x
+  );
+  const top = (
+    baseline === 'bottom' ? y - FONT_HEIGHT :
+    baseline === 'middle' ? y - Math.round(FONT_HEIGHT /2) :
+    y
+  );
+  for (let i=0; i<text.length; i++) {
+    ctx.strokeText(text[i], left + i*FONT_WIDTH + i, top);
+    ctx.fillText(text[i], left + i*FONT_WIDTH + i, top);
+  }
 }
 
 export function drawParagraph(ctx, text, x, y, w, h, color) {