Come si disegna un testo su un tag <canvas> in Safari

Question

Ho sperimentato l'utilizzo del tag <canvas> per disegnare diagrammi e diagrammi semplici e finora è abbastanza facile lavorare con. Ho pensato un problema. Non riesco a capire come disegnare il testo su un <canvas> in Safari. In Firefox 3.0, posso fare questo:

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(); 
    } 
} 

ho visto riferimento ad un metodo fillText() in docs Safari di Apple, ma non sembra essere supportato in Safari 3.2. Questo è solo qualcosa che al momento manca, o è un segreto ben tenuto?

Answer 1

Non credo che Safari 3.2 supporti il ​​rendering del testo nell'area di disegno.

Secondo this blog, Safari 4 beta supporta il testo in sospeso sull'area di disegno, in base allo HTML 5 canvas text APIs.

Edit: mi hanno confermato che il seguente frammento funziona in Safari 4 Beta:

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

Answer 2

Questo non è l'ideale, e sembra che si sta bene in attesa, ma per riferimento, c'è una biblioteca chiamato strokeText che esegue il rendering del proprio carattere. Funziona in Firefox 1.5+, Opera 9+, Safari (non so quali versioni) e IE6 + (usando VML invece di canvas).

Answer 3

Se davvero si vuole utilizzare i metodi di testo HTML5, si dovrebbe provare questa libreria: http://code.google.com/p/canvas-text/

e le demo qui: http://canvas-text.googlecode.com/svn/trunk/examples/index.html

E 'ancora in fase alpha, quindi ogni segnalazione di bug e feedback sono i benvenuti! :)

Answer 4

Sto usando il tag <canvas> per disegnare il logo di Facebook, ma l'immagine, il testo è allungato.

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

file 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; 

}