Snake - Canvas Graphics Example

Create snake with JavaScript and HTML5 Canvas locally. Edit code, see console output, and view your graphics live. Perfect for learning canvas animation with complete privacy.

Features

HTML5 Canvas visualization in real-time
Local JavaScript execution with terminal output
Interactive graphics and animation support
All rendering happens client-side
Share canvas projects with unique URLs

const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";

let x = 10;
let sign = true;
function animate() {
    if (x > 200) {
        sign = false;
    }
    if (x < 10) {
        sign = true;
    }

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    x += sign ? 2 : (-2);
    ctx.fillRect(x, 10, 100, 100);

    requestAnimationFrame(animate);
}
animate();