<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
HTML canvas fillText() Method
</
title
>
</
head
>
<
body
style
=
"text-align:left;"
>
<
h1
>GeeksforGeeks</
h1
>
<
h2
>HTML canvas fillText() Method</
h2
>
<
canvas
id
=
"GFG"
width
=
"500"
height
=
"200"
style
=
"border:2px solid"
>
</
canvas
>
<
script
>
var doc_id = document.getElementById("GFG");
var context = doc_id.getContext("2d");
context.font = "bold 30px solid";
context.fillText("GeeksforGeeks", 180, 100);
// Create gradient
var grad = context.createLinearGradient(0, 0, doc_id.width, 0);
grad.addColorStop("0", "green");
grad.addColorStop("0.5", "white");
grad.addColorStop("1.0", "green");
// Fill with gradient
context.fillStyle = grad;
context.fillText("GeeksforGeeks", 180, 120);
</
script
>
</
body
>
</
html
>