Empty Canvas

this is a good starting point for playing with canvas

HTML

<canvas id="c"></canvas>

CSS

#c {
    background-color: white
}
body {
    background-color: #ddd;
}

JavaScript

var w = 500,
    h = 500;
var my_canvas = document.getElementById("c");
var canvasCtx = my_canvas.getContext("2d");

my_canvas.width = w;
my_canvas.height = h;
canvasCtx.strokeStyle = "#4a4";

// my_context.fillRect(0, 20, 20, 200);


canvasCtx.moveTo(0,20);
canvasCtx.lineTo(w,20);

      canvasCtx.beginPath();
      var radiant = canvasCtx.createRadialGradient(50, 50,10,50,50,Math.PI*2);
      radiant.addColorStop(0, 'rgba(100,100,100,1)');
      radiant.addColorStop(1, 'rgba(100,100,100,0)');
      canvasCtx.fillStyle = radiant;
      canvasCtx.arc(50, 50+250,10,0,Math.PI*2);
      canvasCtx.fill();

 canvasCtx.stroke();



/*
my_context.font = "bold 12px sans-serif";
my_context.fillText("hier bin ich", 30, 50);
*/

/* 
// eine Schleife mit vielen Linien - warum geht das nicht? 
for (var x = 0; x <= w; x += 25) {
    my_context.moveTo(w / 2, h / 2);
    my_context.lineTo(x, h);

}
/*