javascript - mdn - getcontext canvas

¿Cómo dibujar texto en una etiqueta<canvas> en Safari?

Question

He estado experimentando con el uso de la etiqueta <canvas> para dibujar diagramas y gráficos simples, y hasta ahora es bastante fácil trabajar con él. Tengo un problema pensado. No puedo descifrar cómo dibujar texto en un <canvas> en Safari. En Firefox 3.0, puedo hacer esto:

Chart.prototype.drawTextCentered = function(context, text, x, y, font, color) {
if (context.mozDrawText) {
context.save();
context.fillStyle = color;
context.mozTextStyle = font;
x -= 0.5 * context.mozMeasureText(text);
context.translate(x, y);
context.mozDrawText(text);
context.restore();
}
}

He visto referencias a un método fillText() en los documentos Safari de Apple, pero no parece ser compatible con Safari 3.2. ¿Es esto simplemente algo que falta en la actualidad, o es algún secreto bien guardado?

Answer 1

Estoy usando la etiqueta <canvas> para dibujar el logo de Facebook, pero la imagen, el texto se estira.

<div class="content1">
<canvas id = "e" class="myCanvas">
<script>
var canvas = document.getElementById("e");
var context = canvas.getContext("2d");
context.fillStyle = "white";
context.font = "normal 64px Facebook Letter Faces";
context.fillText("facebook",10, 100);
</script>
FACEBOOK
</canvas>
</div>

Archivo CSS:

.content1
{
float:left;
position:relative;
width:180px;
height:120px;
}
.myCanvas
{
float:right;
position:relative;
width:170px;
height:60px;
margin-right:5px;
margin-top:70px;
background-color:#044692;
}

Answer 2

No creo que Safari 3.2 sea compatible con la representación de texto en el lienzo.

Según este blog , Safari 4 beta admite desgarrar texto en el lienzo, en función de las API de texto del lienzo HTML 5 .

editar : He confirmado que el siguiente fragmento funciona en Safari 4 beta:

<canvas id="canvas"></canvas>
<script>
var context = document.getElementById("canvas").getContext("2d");
context.fillText("Hello, world!", 10, 10);
</script>

Answer 3

Esto no es ideal, y parece que está bien esperar, pero para referencia, hay una biblioteca llamada strokeText que hace su propia representación de fuente. Funciona en Firefox 1.5+, Opera 9+, Safari (no sé qué versiones) e IE6 + (usando VML en lugar de canvas).

Answer 4

Si realmente desea utilizar los métodos de texto HTML5, debe probar esta biblioteca: http://code.google.com/p/canvas-text/

y las demostraciones están aquí: http://canvas-text.googlecode.com/svn/trunk/examples/index.html

Todavía está en fase alfa, por lo que cualquier informe de error y comentarios son bienvenidos :)