Proprietatea font

Proprietatea font stabilește setările fontului la desenarea acestuia pe canvas cu ajutorul metodei fillText sau a metodei strokeText. Metoda acceptă aceiași parametri ca și proprietatea CSS font.

Sintaxă

javascriptcontext.font = setări font;

Exemplu

Haideți să desenăm pe canvas un text folosind fillText și să îi setăm dimensiunea la 30px și tipul Arial cu ajutorul font:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.font = '30px Arial';
ctx.fillText('Hello world', 30, 50);

Результат:

Vedeți și

  • proprietatea textAlign,
    care aliniază textul pe orizontală
  • proprietatea textBaseline,
    care aliniază textul pe verticală