Content: How to draw rectangles and circles on a Canvas and save and restore canvas states.
Drawing Rectangles
- rect(): Doesn’t have its own path, needs manual stroke and fill operations.
- strokeRect(): Has its own path, doesn’t require explicit stroke.
- fillRect(): Has its own path, doesn’t require explicit fill.
- clearRect(): Clears a specified region of the canvas.
Three Rectangle Drawing Methods
1 | rect(x, y, w, h); // Doesn't have its own path, needs manual stroke and fill operations |
Parameters are: x coordinate, y coordinate, width, and height.
1 | // rect |
clearRect() Clears the Canvas
clearRect(x, y, w, h);
Parameters are: x coordinate, y coordinate, width, and height.
1 | // Clears a specified region of the canvas |
Drawing Arcs
arc(x, y, r, startAngle, endAngle, anticlockwise)
Parameters:
- x: x-coordinate of the center of the arc.
- y: y-coordinate of the center of the arc.
- r: Radius of the arc.
- startAngle: Starting angle (in radians).
- endAngle: Ending angle (in radians).
- anticlockwise: Whether to draw the arc anticlockwise (true) or clockwise (false, default).
Degrees and Radians
Radians: 360 degrees equals 2 * Math.PI.
Degrees: 1 degree equals Math.PI/180 radians.
Positive and Negative Angles
Starting position: 0 degrees (on the right side of the center) is the reference point, and it’s not affected by the starting angle in the parameters.
Positive values: Represent angles in a clockwise direction from 0 degrees (on the right side).
Negative values: Represent angles in a counterclockwise direction from 0 degrees (on the right side).
Testing Arc Drawing, Example:
1 | var canvas = document.getElementById("canvas"); |
Saving and Restoring Canvas States
- save(): Saves the current drawing state.
- restore(): Restores the most recently saved drawing state.
Multiple states can be saved using a stack (last in, first out) with save()
, and restore()
can be used to retrieve them.
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// First drawing
ctx.fillStyle = "skyblue";
ctx.rect(100, 100, 200, 200);
ctx.stroke();
ctx.fill();
// Save the drawing state
ctx.save();
// Second drawing
ctx.beginPath();
ctx.fillStyle = "deeppink";
ctx.rect(350, 100, 200, 200);
ctx.stroke();
ctx.fill();
// Save the drawing state
ctx.save();
// Third drawing
ctx.beginPath();
ctx.fillStyle = "orange";
ctx.rect(600, 100, 200, 200);
ctx.stroke();
ctx.fill();
// Fourth drawing
ctx.beginPath();
// Restore the previous saved state
ctx.restore();
ctx.rect(850, 100,