HTML5 Canvas Text Stroke for Large Font Size

To draw large font properly in HTML5 Canvas, you can try to run the following code −

var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext("2d");

context.font = '180pt Georgia';
context.strokeStyle = "#FF0000";
context.fillStyle = "#FFFFFF ";
context.lineWidth = 34;

context.fillText("Demo!",0,200);
context.strokeText("Demo!",0,200);

Arjun Thakur

Published on 06-Apr-2018 12:19:30

• Related Questions & Answers
• HTML5 Canvas Font Size Based on Canvas Size
• How to draw large font on HTML5 Canvas?
• Fractional font sizes for HTML5 Canvas?
• HTML5 Canvas Circle Text
• HTML canvas stroke() Method
• How to set the font size of a Tkinter Canvas text item?
• Properties to create text using HTML5 Canvas
• addEventListener for keydown on HTML5 Canvas
• Create a text inside circles in HTML5 Canvas
• Measure text height on an HTML5 canvas element
• Properties for HTML5 Canvas to create shadows
• Autocomplete text input for HTML5?
• Translating HTML5 canvas
• HTML5 Canvas distorted
• HTML5 Canvas Transformation