const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const createShapeButton = document.getElementById("create-shape");
createShapeButton.addEventListener("click", function() {
// Generate a random x, y coordinate for the shape
const x = Math.floor(Math.random() * canvas.width);
const y = Math.floor(Math.random() * canvas.height);
// Generate a random width and height for the shape
const width = Math.floor(Math.random() * 50 + 50);
const height = Math.floor(Math.random() * 50 + 50);
// Generate a random color for the shape
const color = getRandomColor();
// Draw the shape on the canvas
ctx.fillStyle = color;
ctx.fillRect(x, y, width, height);
});
function getRandomColor() {
const letters = "0123456789ABCDEF";
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
#canvas {
border: 1px solid black;
}