HTML canvas closePath() Method

Introduction

Draw a path, shaped as the letter L, and then draw a line back to the starting point:

View in separate window 

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="180" 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.beginPath();/*ww w . j  av a 2  s. co m*/
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.closePath();
ctx.stroke();
</script>

</body>
</html>

The closePath() method creates a path from the current point back to the starting point.

Use the stroke() method to actually draw the path on the canvas.

Use the fill() method to fill the drawing.

Use the fillStyle property to fill with another color/gradient. 

context.closePath();



PreviousNext

Related