Текст в Canvas из HTML 5

Тег Canvas позволяет писать текст с эффектом рельефа и заливать узором.

Вот, например, как может выглядеть текст в Canvas, согласно примеру, созданному с помощью онлайн-инструмента Logo Maker, который представлен на этом сайте :

Text dans Canvas
Демонстрация с логотипом Maker

Для написания текста в этой графической области определены два метода, и они работают как геометрические фигуры:

strokeText (текст, x, y
)
Отображает обводку текста. Цвет зависит от метода strokeStyle.
fillText (текст, x, y
)
Отображает полный текст. Цвет зависит от метода fillStyle.

Несколько примеров проверки реализации

Ниже отображаются два текста в теге Canvas благодаря следующему коду JavaScript:

Непризнанный !

HTML-код:

<canvas id="c1" width="400" height="100">
</canvas>

Код JavaScript:

function canvasFun(){
  var canvas = document.getElementById('c1'); 
  if (canvas.getContext){    
    var ctx = canvas.getContext('2d'); 
    ctx.font = "20pt Calibri,Geneva,Arial";
    ctx.strokeStyle = "rgb(0,0,0)";
    ctx.fillStyle = "rgb(0,20,180)";
    ctx.strokeText("Exemple de texte", 10, 20);
    ctx.fillText("Autre exemple", 10, 60);
  }  
}
window.onload=canvasFun;

Размер текста задается методом fais.
Первое предложение пишется пустым контуром с функцией strokeText, второе - с полнотекстовым контуром, объединенным с функцией fillText.

Инструменты

SVG Текст, демонстрации