Canvas Text with two different font size in the same sentence
Canvas Text with two different font size in the same sentence side by side Is there a way I can achieve this?
ctx.textAlign = left; ctx.font = "bold 20px "; ctx.fillStyle = '#ccc'; ctx.fillText("Normal Small", 100, 300); 
Simple canvas markup
You can define your own markup format and then render the text depending on the markup rules.
For example a string "This is normal, <b>this is bold</b> and back to normal."
Where the tags <b> and </b> define the start and end of the bold section of text.
You then iterate the string breaking it into parts depending on the location of tags. Rather than use RegExp I will search manually and use a stack to keep track of nested styles.
To define style you can just create an object that maps the style via a single character
const styles = { default: { font: "16px arial", fillStyle: "black", }, b: { font: "16px arial black", fillStyle: "black", }, w: { fillStyle: "white" }, }; The styles are set using Object.assign(ctx, styles["b"])
Example
The function canvasMarkupText(ctx, str, x, y, styles) renders text using a simple markup and scheme styles.
-
It creates a stack, that holds a content object which holds the string position and rule name,
-
A render function that will render the details in a content object,
-
A simple iterator (while loop) that controls when content is added and removed from the stack, and when to render content.
-
Before exit it checks if the stack has content and renders an remaining text.
-
The function returns the width of rendered text.
Note There is no validation of the markup.
Note Styles cascade down but not up.
Note This example will only work with single character tags.
Note The use of "<" in the example as markup delimiter means the function can not render that character. To do so you will need to add some form of escape sequence. eg double "<<" can represent that character.
This is an example ONLY and is not meant as a solution. Use it as a guide to build your own.
ctx = canvas.getContext("2d"); const styles = { default: {font: "14px arial", fillStyle: "black",}, b: {font: "14px arial black", fillStyle: "black",}, w: {fillStyle: "white"}, }; canvasMarkupText(ctx, "Testing <b>testing BOLD <w>bold white</w></b> and testing with default <w>and white</w>", 10, 14, styles) function canvasMarkupText(ctx, str, x, y, styles) { const content = (start, end, rule) => ({start, end, rule}); const render = content => { Object.assign(ctx, styles[content.rule] ? styles[content.rule] : {}); const s = str.slice(content.start, content.end) ctx.fillText(s, x, y); x += ctx.measureText(s).width; }; const stack = [], xx = x; var pos = 0, current = content(pos, pos, "default"); stack.push(current); while (pos < str.length) { const c = str[pos++]; if (c === "<") { if (str[pos] === "/") { render(stack.pop()); current = stack[stack.length - 1]; current.start = current.end = (pos += 3); } else { render(current); pos += 2; stack.push(current = content(pos, pos, str[pos - 2])); } } else { current.end = pos } } stack.length && render(current); return x - xx; }canvas {background: #59D}<canvas id="canvas" width="500" height="20"></canvas>
I also tried @BlindMan67 suggestion And did this:
ctx.textAlign = align; ctx.font = "bold 20px " + this.fontStyle; ctx.fillStyle = this.rewardsTextColor; var ctxTextYPlacement = (this.gaugeCenterY - coord.y) - 5; var ctxTextXPlacement = this.gaugeCenterX - coord.x - 12; ctx.fillText(earningValue, ctxTextXPlacement, ctxTextYPlacement); var measure = ctx.measureText(earningValue); var measureWidth = measure.width - 30; ctx.font = "bold 10px " + this.fontStyle; ctx.fillText('mi.', (ctxTextXPlacement + measureWidth), ctxTextYPlacement); 
