HTML canvas strokeText() Method

## HTML Reference

HTML by Alphabet HTML by Function HTML Global Attributes HTML Events HTML Canvas HTML Audio/Video HTML Doctypes HTML Colornames HTML Colorpicker HTML Colormixer HTML Character Sets HTML ASCII HTML ISO-8859-1 HTML Symbols HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods Keyboard Shortcuts

## HTML Tags

<!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <command> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <head> <header> <h1> - <h6> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <keygen> <label> <legend> <li> <link> <map> <mark> <menu> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

# HTML canvas strokeText() Method

HTML Canvas Reference

## Example

Write "Hello world!" and "Big smile!" (with gradient) on the canvas, using strokeText():

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.strokeText("Hello World!",10,50);
ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,90);
Try it yourself »

## Browser Support

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the strokeText() method.

Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.

Note: The maxWidth parameter is not supported in Safari.

## Definition and Usage

The strokeText() method draws text (with no fill) on the canvas. The default color of the text is black.

Tip: Use the font property to specify font and font size, and use the strokeStyle property to render the text in another color/gradient.

JavaScript syntax: | context.strokeText(text,x,y,maxWidth);

## Parameter Values

Parameter | Description | Play it
--- | --- | ---
text | Specifies the text that will be written on the canvas | Play it »
x | The x coordinate where to start painting the text (relative to the canvas) | Play it »
y | The y coordinate where to start painting the text (relative to the canvas) | Play it »
maxWidth | Optional. The maximum allowed width of the text, in pixels | Play it »

HTML Canvas Reference

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE