how to get gradient text on user selected color in HTML
Hellow everyone.
Welcome to Mr.advancetechnical.gq. So today we are sharing a program using canvas tag which creates gradient text on user selected color.
program:-
<html>
<head>
<title>gradient text</title>
<style type="text/css">
canvas{font-size:72px;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding:10px; } </style> </head>
<body>
<center>
<canvas width="500" height="150" style="overflow:scroll;word-wrap:break-word; display:flex; white-space:pre; border:1px solid red" id="fnt"></canvas>
</center>
<form >
<input autofocus="true" type="text" placeholder="enter the text" id="txt" oninput="gradient_font(this.form);"><br/>
<label for="col1">select color 1</label><input type="color" id="col1"><br/><label for="col2">select color 2</label>
<input type="color" id="col2"><br/>
<label for="col3">select color 3</label><input type="color" id="col3"><br/>
</body>
<script language="javascript">
function gradient_font(form){document.getElementById("fnt").innerHTML=document.getElementById("txt").value;
var c=document.getElementById("fnt");var ctx=c.getContext("2d");ctx.font="50px Arial";ctx.fillText(form.txt.value,10,50);
var grd=ctx.createLinearGradient(20,20,20,60);
grd.addColorStop(0,form.col1.value);
grd.addColorStop(0.5,form.col2.value);
grd.addColorStop(1,form.col3.value);
ctx.fillStyle=grd;
}
</script>
</html>
output:-
So that's it for today.
thank you.
No comments: