Social development practitioner. Trying to understand our world.
Unlisted
Edited
Feb 17, 2023
canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
context = canvas.getContext('2d');
circleRadius = 50;
circleFill = '#ffffff';
circleStroke = '#000000';
// Create an array to keep track of the clicked points within each circle
circlePoints = [];
// Function to add a small point marker to a circle at the clicked location
function addPoint(x, y) {
circlePoints.push({ x, y });
context.beginPath();
context.arc(x, y, 3, 0, 2 * Math.PI);
context.fillStyle = circleStroke;
context.fill();
}
// Function to remove the last point marker from a circle
function removePoint() {
circlePoints.pop();
context.clearRect(0, 0, canvas.width, canvas.height);
drawCircles();
}
// Function to draw circles and their associated point markers
function drawCircles() {
// Clear canvas before redrawing everything
context.clearRect(0, 0, canvas.width, canvas.height);
// Draw circles
context.strokeStyle = circleStroke;
context.fillStyle = circleFill;
for (let i = 0; i < 5; i++) {
const x = 100 + i * 100;
const y = 100 + i * 50;
context.beginPath();
context.arc(x, y, circleRadius, 0, 2 * Math.PI);
context.stroke();
context.fill();
// Draw point markers within each circle
const points = circlePoints.filter(p => p.x === x && p.y === y);
context.fillStyle = circleStroke;
points.forEach(p => {
context.beginPath();
context.arc(p.x, p.y, 3, 0, 2 * Math.PI);
context.fill();
});
}
}
// Draw initial circles
drawCircles();
// Add click and double click event listeners to the canvas
canvas.addEventListener('click', event => {
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const points = circlePoints.filter(p => Math.sqrt((p.x - x) ** 2 + (p.y - y) ** 2) <= 3);
if (points.length > 0) {
removePoint();
} else {
addPoint(x, y);
}
});
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
