let canvas = document.createElement('canvas');
document.body.appendChild(canvas);
let ctx = canvas.getContext('2d');

function drawFrame() {
    ctx.clearRect(0, 0, 800, 600);

    // Draw a simple square for demonstration purposes
    ctx.fillStyle = 'blue';
    ctx.fillRect(100, 100, 50, 50);
    ctx.fillStyle = 'red';
    ctx.fillRect(200, 200, 50, 50);

    // Anticipatory element - draw a circle where the user would need to think
    let outerRadius = 20;
    let innerRadius = outerRadius / 2;
    ctx.beginPath();
    ctx.arc(390, 160, outerRadius, 0, Math.PI * 2);
    ctx.fill();

    // Draw a line connecting the two shapes for comparison
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.strokeRect(85, 85, 710, 510);

    requestAnimationFrame(drawFrame);
}
drawFrame();