Code
Execute
<!DOCTYPE html> <html> <head> <title>wikitechy-fillText() Method in canvas</title> </head> <body> <h1>wikitechy-fillText() Method in canvas</h1> <canvas id="wikitechyCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas> <script> var canvas = document.getElementById("wikitechyCanvas"); var context = canvas.getContext("2d"); context.font = "20px Georgia"; context.fillText("WELCOME TO!", 10, 50); context.font = "30px Verdana"; var gra = context.createLinearGradient(0, 0, canvas.width, 0); gra.addColorStop("0", "magenta"); gra.addColorStop("0.5", "blue"); gra.addColorStop("1.0", "red"); context.fillStyle = gra; context.fillText("WIKITECHY!", 10, 90); </script> </body> </html>
Result
