js: Allow CSS to set the font used by the puzzle

This means that the calculated font properties of the HTML canvas now
control what font is used.  The size is overridden, and for monospaced
text so is the family.

I'd like to be able to also specify the monospaced font, maybe using a
CSS variable, but that looks like being quite a lot of extra complexity.

My experience when testing this was that constructing a valid "font"
string for a canvas context is prone to breakage, but broke in a way
that left the font unchanged, so we always set a simple specification
first before trying to construct one from CSS.
This commit is contained in:
Ben Harris
2022-12-05 14:02:59 +00:00
parent a3310ab857
commit 02f1d55a02
4 changed files with 38 additions and 22 deletions

15
emcc.c
View File

@ -72,10 +72,10 @@ extern void js_canvas_draw_poly(const int *points, int npoints,
extern void js_canvas_draw_circle(int x, int y, int r,
const char *fillcolour,
const char *outlinecolour);
extern int js_canvas_find_font_midpoint(int height, const char *fontptr);
extern int js_canvas_find_font_midpoint(int height, bool monospaced);
extern void js_canvas_draw_text(int x, int y, int halign,
const char *colptr, const char *fontptr,
const char *text);
const char *colptr, int height,
bool monospaced, const char *text);
extern int js_canvas_new_blitter(int w, int h);
extern void js_canvas_free_blitter(int id);
extern void js_canvas_copy_to_blitter(int id, int x, int y, int w, int h);
@ -444,14 +444,10 @@ static void js_draw_text(void *handle, int x, int y, int fonttype,
int fontsize, int align, int colour,
const char *text)
{
char fontstyle[80];
int halign;
sprintf(fontstyle, "%dpx %s", fontsize,
fonttype == FONT_FIXED ? "monospace" : "sans-serif");
if (align & ALIGN_VCENTRE)
y += js_canvas_find_font_midpoint(fontsize, fontstyle);
y += js_canvas_find_font_midpoint(fontsize, fonttype == FONT_FIXED);
if (align & ALIGN_HCENTRE)
halign = 1;
@ -460,7 +456,8 @@ static void js_draw_text(void *handle, int x, int y, int fonttype,
else
halign = 0;
js_canvas_draw_text(x, y, halign, colour_strings[colour], fontstyle, text);
js_canvas_draw_text(x, y, halign, colour_strings[colour],
fontsize, fonttype == FONT_FIXED, text);
}
static void js_draw_rect(void *handle, int x, int y, int w, int h, int colour)