Как внутри моего canvas — элемента вывести текст с разным размером?

Question

[Andy Oker]

У меня есть функция, которая выводит диаграммы на странице

function initCanvasDiagrams() {
	let canvas = document.querySelectorAll("canvas");

	canvas.forEach((el, index) => {
		let ctx = el.getContext("2d");
		let lastend = 0;
		let myTotal = 0;

		let data = [30, 15, 30, 25];
		let myColor = ['#1DCDF0', '#00BDBD', '#0D94E0', '#0D53A3'];
		let labels = ['30%', '15', '30', '25'];


		for (let e = 0; e < data.length; e++) {
			myTotal += data[e];
		}

		// make the chart 10 px smaller to fit on canvas
		let off = 10
		let w = (el.width - off) / 2
		let h = (el.height - off) / 2
		for (let i = 0; i < data.length; i++) {

			ctx.fillStyle = myColor[i];
			ctx.beginPath();
			ctx.moveTo(w, h);
			let len = (data[i] / myTotal) * 2 * Math.PI
			let r = h - off / 2
			ctx.arc(w, h, r, lastend, lastend + len, false);
			ctx.lineTo(w, h);
			ctx.fill();

			ctx.fillStyle = 'white';
			ctx.font = 'bold 24px sans-serif';
			ctx.textAlign = "center";
			ctx.textBaseline = "middle";

			let mid = lastend + len / 2
			ctx.fillText(labels[i], w + Math.cos(mid) * (r / 2), h + Math.sin(mid) * (r / 2));
			lastend += Math.PI * 2 * (data[i] / myTotal);
		}
	})
}

Из массива labels подтягиваются значения для конкретной области. Я хочу, чтобы после этого значения выводился символ "%", но с меньшим font-siz'ом. Как бы это реализовать?

Буду рад любой обратной связи!

Answer 1

[WbICHA]

Я хочу, чтобы после этого значения выводился символ "%", но с меньшим font-siz'ом. Как бы это реализовать?

Даже не знаю, что можно для этого сделать?
Хм, может изменить font-size?
ctx.font = 'bold 24px sans-serif';

Comments

[Andy Oker]

С этого момента по подробней

[WbICHA]

Andy Oker, куда ещё подробнее?
Хоп, поменял размер шрифта:
ctx.font = 'bold 12px sans-serif';
Хоп, поменял ещё раз:
ctx.font = 'bold 32px sans-serif';

[Andy Oker]

WbICHA,
Я правильно понимаю, что это предложение сделать так:

ctx.font = 'bold 24px sans-serif';
ctx.fillText('Какая - то строка');
ctx.font = 'bold 15px sans-serif';
ctx.fillText('Какая - то вторая строка строка');

[WbICHA]

Andy Oker, ну да.

[WbICHA]

Andy Oker, только сдвинуть новый текст в нужное место не забудь.

[Andy Oker]

WbICHA, может быть еще что - то надо сделать?)

[Andy Oker]

Я не могу как раз таки "сдвинуть", поэтому и спрашиваю, как реализовать это, мб в реализации, что - то мешает

[WbICHA]

Andy Oker, ну дык с этого и стоило начать.
https://developer.mozilla.org/ru/docs/Web/API/Canv...
Вообще, читать документацию полезно.)