javascript stuff

%%html
<canvas id="interactiveCanvas" width="400" height="400"></canvas>
<button id="clearButton">Clear</button>
<div>
    <input type="range" id="sizeSlider" min="5" max="50" value="10">
    <label for="sizeSlider">Circle Size</label>
</div>
<div>
    <input type="color" id="colorSelector" value="#000000">
    <label for="colorSelector">Circle Color</label>
</div>

<script>
var canvas = document.getElementById("interactiveCanvas");
var context = canvas.getContext("2d");
var isDrawing = false;
var circleSize = 10;
var circleColor = "#000000";

canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("mouseout", stopDrawing);

document.getElementById("clearButton").addEventListener("click", clearCanvas);
document.getElementById("sizeSlider").addEventListener("input", updateCircleSize);
document.getElementById("colorSelector").addEventListener("input", updateCircleColor);

function startDrawing(event) {
    isDrawing = true;
    draw(event);
}

function draw(event) {
    if (!isDrawing) {
        return;
    }

    var x = event.clientX - canvas.getBoundingClientRect().left;
    var y = event.clientY - canvas.getBoundingClientRect().top;

    context.fillStyle = circleColor;
    context.beginPath();
    context.arc(x, y, circleSize, 0, Math.PI * 2);
    context.closePath();
    context.fill();
}

function stopDrawing() {
    isDrawing = false;
}

function clearCanvas() {
    context.clearRect(0, 0, canvas.width, canvas.height);
}

function updateCircleSize(event) {
    circleSize = parseInt(event.target.value);
}

function updateCircleColor(event) {
    circleColor = event.target.value;
}
</script>

Circle Size

Circle Color