Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to achieve this text shadow in canvas text

textarea
{text-shadow:white 0px 1px 0px, white 0px -1px 0px, white -1px 0px 0px, white 1px 0px 0px, white -1px 1px 0px, white 1px 1px 0px, white -1px -1px 0px, white 1px -1px 0px, white 0px 1.5px 0px, white 0px -1.5px 0px, white -1.5px 0px 0px, white 1.5px 0px 0px, white -1.5px 1.5px 0px, white 1.5px 1.5px 0px, white -1.5px -1.5px 0px, white 1.5px -1.5px 0px, rgb(133, 133, 133) 0px -1px 4px, rgb(133, 133, 133) 0px 3px 4px, rgb(133, 133, 133) 3px 0px 4px, rgb(133, 133, 133) -3px 0px 4px;
color:red;
}
<textarea >default text in the textarea
</textarea>

How to apply this text shadow in the canvas text. I searched for various ways like this (http://jsfiddle.net/DirkWeber/nnqc8/1/light/) and I'm not able to replicate this type of text shadow in canvas text. Please let me know how to achieve this.

like image 391
Ashokkumar Avatar asked Oct 19 '25 13:10

Ashokkumar


1 Answers

Canvas example

var canvas = document.getElementsByTagName("canvas")[0],
    ctx = canvas.getContext('2d');

ctx.font="75px verdana";
ctx.shadowColor="black";
ctx.shadowBlur=10;
ctx.lineWidth=10;
ctx.strokeStyle = "white";
ctx.strokeText("HELLO",25,100);
ctx.shadowBlur=0;
ctx.fillStyle="red";
ctx.fillText("HELLO",25,100);
<canvas id="c" width="300" height="130"></canvas>

CSS example

.text {font-size: 3em;
  -webkit-text-stroke: 2px white;
  -webkit-text-fill-color: black;
  -webkit-animation: fill 1s infinite alternate;
text-shadow:2px 2px 10px #000;
}
<div class="text">default text in the textarea
</div>
like image 113
cnsvnc Avatar answered Oct 21 '25 03:10

cnsvnc



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!