⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Building and Drawing Paths

Published : November 17, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
In this exercise we will cover building paths and the JavaScript path drawing methods on the canvas element. 
<!DOCTYPE html>
<html>
<head>
<style>
body{ margin:40px; background:#666; }
#my_canvas{ background:#FFF; border:#000 1px solid; }
</style>
<script>
function draw(){
	var ctx = document.getElementById('my_canvas').getContext('2d');	
	// beginPath() // Resets the current default path
	// fill() // Fills subpaths on the current default path
	// stroke() // Strokes the current default path
	// clip() // Makes a clipping region out of a path
	// closePath() // Close current path
	// moveTo(x, y) // Creates a new subpath with the given point
	// lineTo(x, y) // creates a new line along the current subpath
	// isPointInPath(x, y) // Determines if a specified point is in a path
	
	// rect(x, y, w, h)
	// arc(x, y, radius, startAngle, endAngle, anticlockwise)
	// arcTo(x1, y1, x2, y2, radius) // x1, y1 are the subpath
	// quadraticCurveTo(cpx, cpy, x, y) cp = bezier control point
	// bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
	
}
window.onload = draw;
</script>
</head>
<body>
<canvas id="my_canvas" width="500" height="350"></canvas>
</body>  
</html>
▲