Pregunta

I'm currently making a 2D game engine, and I'm working in the messages for the characters, for this I'm using the fillText method of 2DContext however I have no idea how to stroke a text, I have already tried this way:

context.lineWidth = 1;
context.strokeStyle = '#000';
context.fillText(line, x, y);
context.stroke();

But it doesnt work, I already modified the text color and style like so:

context.font = '18pt Arial';
context.fillStyle = "black";

But no clue about the stroke.

¿Fue útil?

Solución

When working with the Canvas, the cascade operator .. can help make the code more readable:

  context..lineWidth = 3
         ..strokeStyle = "black"
         ..strokeText(line, x, y)
         ..fillStyle = "white"
         ..fillText(line, x, y);

Otros consejos

Found it! the correct way of doing it is:

context.lineWidth = 3;
context.strokeStyle = "black";
context.strokeText(line, x, y);
context.fillStyle = "white";
context.fillText(line, x, y);

Don't forget the fillText after the stroke otherwise what you'll see is a very bold version of the text in the color of the stroke.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top