H-introToAnimation

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

<head>
    <meta charset="utf-8">
    <title>flowers</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");


// Draw backround.
dt1.fillStyle = "lightGray";
dt1.fillRect(0, 0, layer1.width, layer1.height);

var xposr = 0;
var speed = 5;

setInterval(draw,30);

function draw()
    {
        myC();
    }

function myC()
    {
        dt2.clearRect(0,0,layer2.width,layer2.height);
        dt2.fillStyle = "blue";
        dt2.strokeStyle = "purple";
        dt2.fillRect(xposr,0,50,50);
        dt2.strokeRect(xposr,0,50,50);
        xposr = xposr + speed;

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

</body>
</html>