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();
Bouncing Ball Paint
Welcome to Paint Brush!
Before you begin: Please type in a color, width, and speed. Now sit back and enjoy the show.