Coloring Bitmap Fonts in HTML5 Canvas
April 10, 2016
When rendering text in HTML5 canvas, I mostly use the native text drawing methods like
fillText. However, a question came up on the LDG forum (now offline) a while back about rendering bitmap fonts with varying colors.
Bitmap fonts are simply images of text characters which are then rendered to the screen the same way you might render game sprites, with
The source image for a bitmap font would look something like this:
In order to render this font using different colors, we can take advantage of the composite operations supported by canvas.
The basic concept is to first draw the letters to an off-screen buffer canvas and then use the
source-in composite operation to draw over just the black pixels with a different color.
Note: This example doesn't cover how to render a string of text by mapping each character to a position in the image.
// Draw mask to buffer
ctx.clearRect(0, 0, buffer.width, buffer.height);
ctx.drawImage(font, 0, 0, 256, 64, 0, 0, 256, 64);
// Draw the color only where the mask exists
ctx.fillStyle = "white";
ctx.globalCompositeOperation = "source-in";
ctx.fillRect(0, 0, 256, 64);
// Now, render the contents of the buffer to the screen
Using this technique, we can render text in any color using a single bitmap font image: