Notes on HTML Canvas
beginPath(): This method starts a new path, which means that any path previously drawn on the canvas will be cleared. You should call this method before starting to draw any new path.moveTo(x, y): This method sets the starting point of the path to the coordinates (x, y) on the canvas. This method does not actually draw anything on the canvas, but it sets the point from which the next line or curve will start.
lineTo(x, y): This method draws a straight line from the current point to the point (x, y) on the canvas. This method does not actually draw the line on the canvas, but it adds the line to the current path.
arc(x, y, radius, startAngle, endAngle, anticlockwise): This method draws an arc on the canvas, centered at the point (x, y) with a given radius, starting at the angle startAngle and ending at the angle endAngle. The anticlockwise parameter specifies whether the arc should be drawn in a clockwise or anticlockwise direction.
fill(): This method fills the current path with the current fill style. The fill style can be set using the fillStyle property of the canvas context.
stroke(): This method strokes the current path with the current stroke style. The stroke style can be set using the strokeStyle property of the canvas context.
rect(x, y, width, height): This method draws a rectangle on the canvas with the top-left corner at the point (x, y) and with a given width and height.
clearRect(x, y, width, height): This method clears a rectangular area on the canvas with the top-left corner at the point (x, y) and with a given width and height.
fillRect(x, y, width, height): This method fills a rectangular area on the canvas with the current fill style. The top-left corner of the rectangle is at the point (x, y) and the rectangle has a given width and height.
strokeRect(x, y, width, height): This method strokes the border of a rectangular area on the canvas with the current stroke style. The top-left corner of the rectangle is at the point (x, y) and the rectangle has a given width and height.
arcTo(x1, y1, x2, y2, radius): This method draws an arc that is tangent to two lines: one that starts at the current point and goes to the point (x1, y1), and another that starts at the point (x1, y1) and goes to the point (x2, y2). The arc has a given radius.
quadraticCurveTo(cp1x, cp1y, x, y): This method draws a quadratic Bézier curve from the current point to the point (x, y), with a control point at the point (cp1x, cp1y).
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): This method draws a cubic Bézier curve from the current point to the point (x, y), with two control points at the points (cp1x, cp1y) and (cp2x, cp2y).
clip(): This method sets the current path as a clipping path, which means that any subsequent drawing operations will be limited to the area inside the path.
Sample graphing paper: 800x600
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Draw the graph paper background
ctx.beginPath();
for (let x = 0; x <= canvas.width; x += 20) {
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
}
for (let y = 0; y <= canvas.height; y += 20) {
ctx.moveTo(0, y);
ctx.lineTo(canvas.width, y);
}
ctx.strokeStyle = '#ddd';
ctx.stroke();
// Writing the labels
ctx.fillStyle = 'black';
ctx.font = '14px Arial';
ctx.fillText('y = 600', 5, 595);
ctx.fillText('0,0', 5, 15);
ctx.fillText('x = 800', 750, 15);