Car

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>Intro to animation</title>
</head>
<canvas id="canvas1" width="640" height="480" style="border: 1px solid black;position:absolute; left:0; top 0; z-index: 0,"></canvas>
<canvas id="canvas2" width="640" height="480" style="border: 1px solid black;position:absolute; left: 0; top 0; z-index: 1;"></canvas>

<body>

<script>

var layer1 = document.getElementById("canvas1");
var dt1 = layer1.getContext("2d");
var layer2 = document.getElementById("canvas2");
var dt2 = layer2.getContext("2d");


dt1.fillStyle = "LightGray";
dt1.fillRect(0, 0, layer1.width, layer1.height);

var rectXPos = 0;
var speed = 5;

setInterval(draw, 30);


function draw()
{
    myRectangle();

}

function myRectangle()
{
    dt2.clearRect(0, 0, layer2.width, layer2.height);
    dt2.fillStyle = "black";
    dt2.strokeStyle = "black";
    dt2.fillRect(rectXPos,120, 50, 50);
    dt2.strokeRect(rectXPos, 121, 50, 50);

    dt2.fillstyle = "black";
    dt2.fillRect(rectXPos-12, 99, 20, 20);

    dt2.fillstyle = "black";
    dt2.fillRect(rectXPos-12, 171, 20, 20);

    dt2.fillstyle = "black";
    dt2.fillRect(rectXPos+42,171, 20, 20);

    dt2.fillstyle = "black";
    dt2.fillRect(rectXPos+42,99, 20, 20);


    rectXPos = rectXPos + speed;


    if (rectXPos <0 || rectXPos >590)
        {
            speed = speed * -1;
        }

}
</script>

</body>
</html>