<script> // DEFINE YOUR GLOBAL VARIABLES HERE var canvas; var context; var nf; nf = 10; var inc; inc = 0; // INITIALIZE THE STARTING FUNCTION function init() { canvas = document.getElementById("myCanvas"); context = canvas.getContext("2d"); // CALL SUBSEQUENT FUNCTIONS, as many as you need drawBkgd(); // COVER TRANSPARENT CANVAS return setInterval(create, 50); // THIS IS WHERE AL HAPPENS } function drawBkgd() { // USE THIS AREA TO MODIFY BKGD context.fillStyle = "rgb(255,100,100)"; context.fillRect(0,0,canvas.width, canvas.height); } function clear() { context.clearRect(0,0,canvas.width, canvas.height); } function create() { // POSSIBILITY ONE /*if (nf < 100) { inc = 1; } if (nf>300) { inc = -1; } nf += inc*10;*/ // POSSIBILITY TWO SINE INCREMENT inc += 0.1; if (inc > Math.PI *2) { inc = 0; } var nf = Math.abs(Math.cos(inc) * 100) + 10; var mf = context.font = "normal "+nf+"px 'Arial black'"; clear(); drawBkgd(); context.fillStyle = "black"; context.font = mf; context.textAlign = 'center'; context.fillText("ART", canvas.width/2, canvas.height-nf); } </script>