tomchen/bdfparser-js

BDF (Glyph Bitmap Distribution) format bitmap font file parser library in TypeScript (JavaScript) 🔣📜

bdfparser-js's Issues

Avoiding anti-aliasing when rendering bitmap fonts on a canvas

Dear Tom
First of all, thank you very much for this library; it is already of great use to me.
I am reaching out to you because I am currently struggling with rendering a small (5x7) BDF font on a canvas: The font is hard to read due to anti-aliasing effects (see screenshot below). Do you have any experience with this, or do you know how to get a pixel-perfect bitmap rendering? I already tried to disable canvasContext.imageSmoothingEnabled without any luck.

Background: I want to render the website on a low-resolution LED matrix.

Thank you very much for any ideas.
Cheers and have a nice day, remolueoend

Recommended way to position drawing within canvas?

What is the recommended way to change the position where the bitmap is drawn on the canvas using draw2canvas()? I noticed that x and y are hardcoded to start at 0 in the function definition (below) and using context.moveTo() does not seem to have any effect.

bdfparser-js/src/bdfparser.ts

Lines 1796 to 1829 in 71a4ee3

	/**
	* Draw the bitmap to HTML canvas
	*
	* @param context - Canvas 2D context (`canvas.getContext("2d")`)
	* @param pixelcolors - Object mapping `'0'`/`'1'`/`'2'` in the bitmap data to color
	*
	* @returns The `Bitmap` object itself
	*
	* @see online docs: {@link https://font.tomchen.org/bdfparser_js/bitmap#draw2canvas}
	*/
	draw2canvas(
	context: CanvasContext,
	pixelcolors?: Record<'0' | '1' | '2', string | null> | null
	): this {
	const _pixelcolors = pixelcolors ?? {
	'0': null,
	'1': 'black',
	'2': 'red',
	}
	this.todata(2).forEach((line, y) => {
	line.forEach((pixel, x) => {
	const s = pixel.toString()
	if (s === '0' || s === '1' || s === '2') {
	const color = _pixelcolors[s]
	if (color !== null && color !== undefined) {
	context.fillStyle = color
	context.fillRect(x, y, 1, 1)
	}
	}
	})
	})
	return this
	}
	}