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 :)