Untitled

<html>
    <header>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Bouncing Ball Paint</title>
        <body>
            Welcome to Paint Brush!
            Before you begin: Please type in a color, width, and speed. Now sit back and enjoy the show.</body>
        <body>
        <style>
        #ball{background:#CCC;}
        </style>
    </header>
    <body style="background-color:#FFDEAD;">
        Ball Width: <input type="text" id="lineWidth"></input>
        Ball Color: <input type="text" id="lineColor"></input>
        Ball Speed X:<input type="text" id="speedx"></input>
        <input type="button" value="Clear" onClick="window.location.href=window.location.href">
        <input type="button" value="Green" id="green" onclick= "DGN.GreenRect()" />
        <div id="container">


        <canvas id="ball" width="1000" height="700"></canvas>

        <script type="text/javascript"

        src="balledit3.js"> </script>

    </body>
</html>

var x=50;
var y=300;
var dx=10;
var dy=10;

function draw(){
    var canvas = document.getElementById('ball');
    context= ball.getContext('2d');
    context.clearRect(0,0,canvas.width,canvas.height);
    lineColor = (document.getElementById('lineColor').value.length>0)?document.getElementById('lineColor').value:'#0000FF';
    lineWidth = (document.getElementById('lineWidth').value.length>0)?document.getElementById('lineWidth').value:'10';
    context.beginPath();
    context.fillStyle=lineColor;
    context.arc(x,y,lineWidth,20,Math.PI*2,true);
    context.closePath();
    if (lineWidth){
        context.lineWidth=lineWidth;
    }
    if (lineColor){
        context.strokeStyle=lineColor;
        context.stroke();
    }
    context.fill();
    if( x<0 || x>1000)
    dx=-dx;
    if( y<0 || y>700)
    dy=-dy;
    x+=dx;
    y+=dy;
    fr = (document.getElementById('speedx').value>0)?document.getElementById('speedx').value:50;
    setTimeout(draw,fr);
}
draw();

<!DOCTYPE html>

<html>
    <head>
        <title>Bouncing Ball Paint</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>#ball{background:#CCC;}</style>
    </head>
    <body style="background-color:#FFDEAD;">
        <p>Welcome to Paint Brush!</p>
        <p>Before you begin: Please type in a color, width, and speed. Now sit back and enjoy the show.</p>
        <form id="container">
            <fieldset>
                <label>Ball Width:</label><input type="text" id="lineWidth" />
                <br />
                <label>Ball Color:</label><input type="text" id="lineColor" />
                <br />
                <label>Ball Speed X:<input type="text" id="speedx" />
            </fieldset>
            <input type="reset" value="Clear" />
            <input type="button" value="Green" id="green" onclick="javascript:DGN.GreenRect();" />
            <fieldset>
                <canvas id="ball" width="1000" height="700">This text is displayed if your browser does not support HTML5 Canvas.</canvas>
            </fieldset>
        </form>
        <script type="text/javascript" src="draw.js"></script>
    </body>
</html>