var my_canvas = document.createElement('canvas'); my_canvas.width = 500; my_canvas.height = 300; document.body.appendChild(my_canvas); var ctx = my_canvas.getContext('2d'); var x = 20; var y = 20; var fps = 60; var dx=3; var dy=2; animacja(); function animacja(){ requestAnimationFrame( animacja ) ctx.fillStyle = 'rgba(255,255,255,0.2)'; ctx.fillRect(0,0,my_canvas.width, my_canvas.height); ctx.fill(); x = x + dx; y = y + dy; if( x<20 || x>420) dx=-dx; if( y<20 || y>220) dy=-dy; ctx.fillStyle= '#38ccdd'; ctx.beginPath() ctx.arc(x+30, y+30,30,0,Math.PI*2,); ctx.fill(); }
<script> </script>