Coloring Bitmap Fonts in HTML5 Canvas
#canvas #gamedev #html5 #javascript
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 drawImage.
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.
Here's a snippet of JavaScript demonstrating how the compositing works:
// 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 screenUsing this technique, we can render text in any color using a single bitmap font image: