Understanding Clockwise Angle Accumulation and the X-Axis Starting Point in Canvas
Tech
1
Visual Representation
The HTML5 Canvas API defines angle mesaurements for drawing arcs and positioning items around a circle using radians. The zero-radian (0°) point is located on the positive x-axis. From this starting point, angles increase in a clockwise direction.
Key Ipmlementation
// Draw directional arc segments
for(let segment = 0; segment < 4; segment++) {
let arcStart = (Math.PI / 2) * segment;
let arcEnd = arcStart + Math.PI / 2;
let startX = 180 * Math.cos(arcStart);
let startY = 180 * Math.sin(arcStart);
let endX = 180 * Math.cos(arcEnd);
let endY = 180 * Math.sin(arcEnd);
ctx.beginPath();
ctx.arc(0, 0, 180, arcStart, arcEnd, false);
ctx.lineTo(endX, endY);
ctx.lineTo((startX - endX) / 18 + endX, (startY - endY) / 18 + endY);
ctx.lineTo(endX, endY);
ctx.lineTo((endY - startY) / 18 + endX, (startX - endX) / 18 + endY);
ctx.lineWidth = 2;
ctx.strokeStyle = selectColor(segment);
ctx.stroke();
}
// Label positions with numbers
for(let label = 0; label < 12; label++) {
let angle = label * Math.PI / 6;
let posX = 200 * Math.cos(angle);
let posY = 200 * Math.sin(angle);
ctx.textBaseline = "bottom";
ctx.textAlign = "center";
ctx.font = "18px consolas";
ctx.fillStyle = "black";
ctx.fillText(label, posX, posY + 12);
}
Complete Example Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Angle Direction Demo</title>
<style>
.container { margin: 0 auto; width: 600px; }
canvas { border: 1px solid #ccc; }
</style>
</head>
<body onload="setupCanvas();">
<div class="container">
<canvas id="demoCanvas"></canvas>
</div>
<script>
const CANVAS_WIDTH = 512;
const CANVAS_HEIGHT = 512;
let drawingContext;
function setupCanvas() {
const canvasElement = document.getElementById('demoCanvas');
canvasElement.width = CANVAS_WIDTH;
canvasElement.height = CANVAS_HEIGHT;
drawingContext = canvasElement.getContext('2d');
drawingContext.translate(CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2);
renderVisualization();
}
function renderVisualization() {
drawingContext.clearRect(-CANVAS_WIDTH/2, -CANVAS_HEIGHT/2, CANVAS_WIDTH, CANVAS_HEIGHT);
// Draw four colored quadrants with direction indicators
for(let quadrant = 0; quadrant < 4; quadrant++) {
let startAngle = (Math.PI / 2) * quadrant;
let endAngle = startAngle + Math.PI / 2;
let startPtX = 180 * Math.cos(startAngle);
let startPtY = 180 * Math.sin(startAngle);
let endPtX = 180 * Math.cos(endAngle);
let endPtY = 180 * Math.sin(endAngle);
drawingContext.beginPath();
drawingContext.arc(0, 0, 180, startAngle, endAngle, false);
drawingContext.lineTo(endPtX, endPtY);
drawingContext.lineTo((startPtX - endPtX) / 18 + endPtX, (startPtY - endPtY) / 18 + endPtY);
drawingContext.lineTo(endPtX, endPtY);
drawingContext.lineTo((endPtY - startPtY) / 18 + endPtX, (startPtX - endPtX) / 18 + endPtY);
drawingContext.lineWidth = 2;
drawingContext.strokeStyle = getQuadrantColor(quadrant);
drawingContext.stroke();
}
// Place numeric labels at 30-degree intervals
for(let position = 0; position < 12; position++) {
let currentAngle = position * Math.PI / 6;
let labelX = 200 * Math.cos(currentAngle);
let labelY = 200 * Math.sin(currentAngle);
drawingContext.textBaseline = "bottom";
drawingContext.textAlign = "center";
drawingContext.font = "18px monospace";
drawingContext.fillStyle = "#000";
drawingContext.fillText(position, labelX, labelY + 12);
}
}
function getQuadrantColor(index) {
const colors = ["rgb(226,69,20)", "rgb(253,184,29)", "rgb(145,166,2)", "rgb(32,164,208)"];
return colors[index % colors.length];
}
</script>
</body>
</html>
