Zeichnen auf dem HTML5-Canvas

canvas.js

var canvas = document.querySelector("#canvas"),
    context = canvas.getContext("2d");

// Zeichne eine Linie von x1,y1 nach x2,y2 
function drawLine(x1, y1, x2, y2, color, weight) {
    context.beginPath();
    context.moveTo(x1, y1);
    context.lineTo(x2, y2);
    context.strokeStyle = color;
    context.lineWidth = weight;
    context.stroke();
    context.closePath();
}

// Zeichne einen Kreis an der Position x,y
function drawCircle(x, y, radius, color) {
    context.beginPath();
    context.fillStyle = color;
    context.arc(x, y, radius, 0, 2 * Math.PI, false);
    context.fill();
    context.closePath();
}

// Zeichne ein Rechteck an der Position x,y
function drawRect(x, y, width, color) {
    context.beginPath();
    context.fillStyle = color;
    context.rect(x - width/2, y - width/2, width, width);
    context.fill();
    context.closePath();
}

// Lösche einen rechteckigen Bereich des Canvas
function erase(x, y, width) {
    context.clearRect(x - width/2, y - width/2, width, width);
}