Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
HTML5 Canvas Text Outline

HTML5 Canvas Text Outline

CSS Stroke Text Using text-shadow. The idea is to have multiple shadows combined all around the text to give the illusion of a real stroke text.

Sample code for CSS text stroke definitive guide on coding-dude.com

A Pen by Ion Emil Negoita on CodePen.

License.

<canvas id="myCanvas" width="850" height="300"></canvas>
<footer>The Definitive Guide to <a href="http://www.coding-dude.com/wp/css/css-stroke-text/">Stroke Text CSS</a> made by <a href="http://www.coding-dude.com">Coding Dude</a></footer>
var myCanvas = document.querySelector("#myCanvas");
var ctx = myCanvas.getContext("2d");
ctx.strokeStyle = "red";
ctx.lineWidth = 3;
ctx.font = "70px sans-serif";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.strokeText("CANVAS TEXT OUTLINE", myCanvas.width / 2, myCanvas.height / 2);
:root{
font-size:75px;
font-family:sans-serif;
font-weight:bold;
text-align:center;
margin-top:30vh;
}
footer{
position:absolute;
bottom:50px;
right:50px;
font-size:13px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.