stroke() Method - Javascript Canvas Reference

Javascript examples for Canvas Reference:stroke

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

Description

The stroke() method draws the path defined by moveTo() and lineTo() methods. The default color is black.

JavaScript syntax 

context.stroke();

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 ww  w.  j a  v a  2  s. com
ctx.strokeText("from java2s.com", 10, 90);

</script>

</body>
</html>

Related Tutorials