playing with space, shape, colour & composition
canvas = {
const context = DOM.context2d(width, height); // Create canvas and get context
// render
drawPolygon(context, numberOfSides, radiusRange, rotationAngle, 8); // Adjust the last parameter for stroke width
return context.canvas;
}
function drawPolygon(context, numberOfSides, radius, rotationDegrees, strokeWidth) {
const centerX = width / 2;
const centerY = height / 2;
const rotationRadians = rotationDegrees * Math.PI / 180; // Convert degrees to radians
context.clearRect(0, 0, width, height); // Clear previous drawing
context.beginPath();
for (let i = 0; i <= numberOfSides; i++) {
const angle = 2 * Math.PI / numberOfSides * i + rotationRadians;
const x = centerX + radius * Math.cos(angle);
const y = centerY + radius * Math.sin(angle);
if (i === 0) context.moveTo(x, y);
else context.lineTo(x, y);
}
context.closePath();
context.strokeStyle = "hsl(50deg 100% 50%)"; // Set stroke color
context.lineWidth = strokeWidth; // Set stroke width here
context.stroke(); // Draw the polygon
}
height = 600;
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.
