Formatowanie tekstu w Canvas za pomocą CSS

Question

Robię projekcik w JS z użyciem Canvas. Napisałem tekst i chciałem przenieść jego formatowanie do CSS i pojawił się problem ponieważ style czcionek, rozmiar itp nie działają z podpiętego pliku CSS. Nie da się tego tak zrobić czy coś zepsułem? Kolor tła mi zmienił więc plik CSS widzi w oknie "my_canvas".

script.js

var ctx = document.getElementById('my_canvas').getContext('2d');
...	

function Speak() 
	{
		//ctx.font = "italic bold 20px Arial"; ctx.fillStyle = "#222222";
		this.render = function()
		{
			switch (Tmap[position.rposY][position.rposX])
			{
				case 30:
					ctx.fillText ("Przykładowy tekst ", player.x+90, player.y-50);
				break;
			}
		}
	}

style.css

#my_canvas
{
	background: black;
	border: #000 1px solid;
	margin: 10px;
	
	font-family: Verdana;
	font-size: 30px;
	color: white;
}

Proszę o podpowiedz co z tym zrobić sensownego bo chciałem uporządkować trochę kod aby nie mieć czcionek w JS i CSS tylko wszystko w jednym miejscu. Z góry dzięki za pomoc

Answer 1

W taki sposób jesteś w stanie wystylizować jedynie sam element canvas, nie natomiast to, co jest w nim generowane. Style dla tego musisz niestety trzymać w pliku JS… Chyba że się wycwanić, przeinżynierujesz i wepchasz w to CSS Modules ;)

Comments

A już myślałem, że ładnie wszystko posegreguję. Dzięki za info chociaż wiem na czym stoję ;)