HTML canvas text

Yadda ake ɗaukakar aya a cikin ɗakarun kanan

Ƙarfin da kuma ƙarfin ƙoƙari wajen ɗaukakar aya a cikin ɗakarun kanan shine:

• font - Tamaɓanta na fariyaɗa na aya
• fillText(text,x,y) - Yadda ake ɗaukakar aya (fiyaɗaɗa) a cikin ɗakarun kanan
• strokeText(text,x,y) - Yadda ake ɗaukakar aya a cikin ɗakarun kanan (ba a fiyaɗaɗa ba)

Amfani da fillText()

Yanar Gudanarwa

Tasi mai sabu "30px Arial", kuma yadda kuma yadda yaɗaɗa ɗanɗin fariyaɗa a cikin ɗakarun kanan (fiyaɗaɗa):

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Sannu Duniya", 10, 50);

Try it yourself

Amfani da strokeText()

Yanar Gudanarwa

Tasi mai sabu "30px Arial", kuma yadda kuma yadda yaɗaɗa ɗanɗin fariyaɗa a cikin ɗakarun kanan (ba a fiyaɗaɗa ba):

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Sannu Duniya", 10, 50);

Try it yourself

Tashi da kuma ɗaukakar aya

Yanar Gudanarwa

Tasi mai sabu "30px Comic Sans MS", kuma yadda kuma yadda yaɗaɗa ɗanɗin fariyaɗa a cikin ɗakarun kanan:

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Sannu Duniya", canvas.width/2, canvas.height/2);

Try it yourself

See also:

Complete Canvas reference manual of CodeW3C.com