draw(renderer, text, x, y) {
		// save the previous global alpha value
		const _alpha = renderer.globalAlpha();

		// allows to provide backward compatibility when
		// adding Bitmap Font to an object container
		if (typeof this.ancestor === "undefined") {
			// update cache
			this.setText(text);
			renderer.setGlobalAlpha(_alpha * this.getOpacity());
		} else {
			// added directly to an object container
			x = this.pos.x;
			y = this.pos.y;
		}

		const lX = x;
		const stringHeight = this.metrics.lineHeight();
		let maxWidth = 0;

		for (let i = 0; i < this._text.length; i++) {
			x = lX;
			const string = this._text[i].trimEnd();
			// adjust x pos based on alignment value
			const stringWidth = this.metrics.lineWidth(string);
			switch (this.textAlign) {
				case "right":
					x -= stringWidth;
					break;

				case "center":
					x -= stringWidth * 0.5;
					break;

				default:
					break;
			}

			// adjust y pos based on alignment value
			switch (this.textBaseline) {
				case "middle":
					y -= stringHeight * 0.5;
					break;

				case "ideographic":
				case "alphabetic":
				case "bottom":
					y -= stringHeight;
					break;

				default:
					break;
			}

			// update initial position if required
			if (this.isDirty === true && typeof this.ancestor === "undefined") {
				if (i === 0) {
					this.pos.y = y;
				}
				if (maxWidth < stringWidth) {
					maxWidth = stringWidth;
					this.pos.x = x;
				}
			}

			// draw the string
			let lastGlyph = null;
			for (let c = 0, len = string.length; c < len; c++) {
				// calculate the char index
				const ch = string.charCodeAt(c);
				const glyph = this.fontData.glyphs[ch];

				if (typeof glyph !== "undefined") {
					const glyphWidth = glyph.width;
					const glyphHeight = glyph.height;
					const kerning =
						lastGlyph && lastGlyph.kerning ? lastGlyph.getKerning(ch) : 0;
					const scaleX = this.fontScale.x;
					const scaleY = this.fontScale.y;

					// draw it
					if (glyphWidth !== 0 && glyphHeight !== 0) {
						// some browser throw an exception when drawing a 0 width or height image
						renderer.drawImage(
							this.fontImage,
							glyph.x,
							glyph.y,
							glyphWidth,
							glyphHeight,
							x + glyph.xoffset * scaleX,
							y + glyph.yoffset * scaleY,
							glyphWidth * scaleX,
							glyphHeight * scaleY,
						);
					}

					// increment position
					x += (glyph.xadvance + kerning) * scaleX;
					lastGlyph = glyph;
				} else {
					console.warn(
						"BitmapText: no defined Glyph in for " + String.fromCharCode(ch),
					);
				}
			}
			// increment line
			y += stringHeight;
		}

		if (typeof this.ancestor === "undefined") {
			// restore the previous global alpha value
			renderer.setGlobalAlpha(_alpha);
		}

		// clear the dirty flag here for
		// backward compatibility
		this.isDirty = false;
	}
draw the bitmap font
@param {CanvasRenderer|WebGLRenderer} renderer - Reference to the destination renderer instance
@param {string} [text]
@param {number} [x]
@param {number} [y]