strokeText() Method - Javascript Canvas Reference

Javascript examples for Canvas Reference:strokeText

  1. HOME
  2. Javascript
  3. Canvas Reference
  4. strokeText

Description

The strokeText() method draws text on the canvas. The default color is black.

JavaScript syntax 

context.strokeText(text, x, y, maxWidth);

Parameter Values

Parameter Description
text text to draw
x The x coordinate where to start painting the text
y The y coordinate where to start painting the text
maxWidth Optional. The maximum allowed width of the text, in pixels

Write "Hello world!" and "from java2s.com" (with gradient) on the canvas, using strokeText():

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="250" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

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("1.0", "red");

// Fill with gradient
ctx.strokeStyle = gradient;/*from www .ja  v  a  2s .c  o m*/
ctx.strokeText("from java2s.com", 10, 90);

</script>

</body>
</html>

Related Tutorials