Drawing Using Paths

Name	Description	Returns
beginPath()	Begins a new path	void
closePath()	Close a path by drawing a line from the end of the last line to the initial coordinates	void
fill()	Fills the shape	void
isPointInPath(x, y)	Returns true if a point is contained by the current path	boolean
lineTo(x, y)	Draws a sub-path to the specified coordinates	void
moveTo(x, y)	Moves to the specified coordinates without drawing	void
rect(x, y, w, h)	Draws a rectangle whose top-left corners is at (x, y) with width w and height h.	void
stroke()	Draws the outline of the shape	void

Drawing Paths with Lines

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {
      border: thin solid black
}

body>* {
      float: left;
}
</style>
</head>
<body>
      <canvas id="canvas" width="500" height="140"> 
      Your browser doesn't support the <code>canvas</code> element 
      </canvas>
      <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            ctx.fillStyle = "yellow";
            ctx.strokeStyle = "black";
            ctx.lineWidth = 4;
            ctx.beginPath();
            ctx.moveTo(10, 10);
            ctx.lineTo(100, 10);
            ctx.lineTo(100, 120);
            ctx.closePath();
            ctx.fill();
            ctx.beginPath();
            ctx.moveTo(150, 10);
            ctx.lineTo(320, 10);
            ctx.lineTo(20, 120);
            ctx.lineTo(120, 120);
            ctx.fill();
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(20, 10);
            ctx.lineTo(220, 120);
            ctx.stroke();
      </script>
</body>
</html>

Click to view this demo.

Setting the lineCap property

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {
      border: thin solid black
}

body>* {
      float: left;
}
</style>
</head>
<body>
      <canvas id="canvas" width="200" height="140"> 
      Your browser doesn't support the <code>canvas</code> element 
      </canvas>
      <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            ctx.strokeStyle = "red";
            ctx.lineWidth = "2";
            ctx.beginPath();
            ctx.moveTo(20, 50);
            ctx.lineTo(200, 220);
            ctx.stroke();
            ctx.strokeStyle = "black";
            ctx.lineWidth = 40;
            var xpos = 50;
            var styles = [ "butt", "round", "square" ];
            for ( var i = 0; i < styles.length; i++) {
                  ctx.beginPath();
                  ctx.lineCap = styles[i];
                  ctx.moveTo(xpos, 250);
                  ctx.lineTo(xpos, 20);
                  ctx.stroke();
                  xpos += 50;
            }
      </script>
</body>
</html>

Click to view this demo.

Drawing Rectangles

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {
      border: thin solid black
}

body>* {
      float: left;
}
</style>
</head>
<body>
      <canvas id="canvas" width="500" height="140"> 
      Your browser doesn't support the <code>canvas</code> element 
      </canvas>
      <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            ctx.fillStyle = "yellow";
            ctx.strokeStyle = "black";
            ctx.lineWidth = 4;
            ctx.beginPath();
            ctx.moveTo(110, 10);
            ctx.lineTo(110, 120);
            ctx.lineTo(10, 110);
            ctx.closePath();
            ctx.rect(110, 100, 100, 90);
            ctx.rect(110, 110, 130, 30);
            ctx.fill();
            ctx.stroke();
      </script>
</body>
</html>

Click to view this demo.

Working with disconnected sub-paths

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {
      border: thin solid black
}
</style>
</head>
<body>
      <canvas id="canvas" width="500" height="140"> 
      Your browser doesn't support the <code>canvas</code> element 
      </canvas>
      <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            ctx.fillStyle = "yellow";
            ctx.strokeStyle = "black";
            ctx.lineWidth = 4;
            ctx.beginPath();
            ctx.moveTo(10, 10);
            ctx.lineTo(100, 100);
            ctx.lineTo(10, 110);
            ctx.closePath();
            ctx.rect(100, 100, 100, 90);
            ctx.rect(150, 110, 130, 20);
            ctx.fill();
            ctx.stroke();
      </script>
</body>
</html>

Click to view this demo.