Canvas + Rect + Line

Beispiel für zeichnen auf dem Canvas

HTML

<p>It's a me ... Mario!  <a href="http://4.bp.blogspot.com/-AhbqKb6kLjk/TmWESLSYJeI/AAAAAAAABzA/ALlIe8c2poU/s1600/MarioLuigi.jpg" target="_blank">und Luigi</a></p>

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

CSS

#c { 
    background-color: white 
}
body {
    background-color: white;
    font-size: 60px;
    font-family: Impact;
}

JavaScript

var img_url = $('a').attr('href');

var my_canvas = document.getElementById("c");
var my_context = my_canvas.getContext("2d");

my_canvas.width = 600;
my_canvas.height = 400;

var moveX = 0;


function paint() {
    for (var x = 0; x <= my_canvas.width; x += 50) {
        my_context.moveTo(my_canvas.width/2,my_canvas.height/2);
        my_context.lineTo(x, my_canvas.height);
    }
    my_context.strokeStyle = "#4a4";
    my_context.stroke();


    my_context.fillRect(140, 800,20, 15);
    
    moveX += 1;
}


$("<img/>").attr("src", img_url).load(function() {
    my_context.drawImage(this, moveX, 0, this.width, this.height, 0, 0, my_canvas.width, my_canvas.height);
    paint();
});