View Full Version : Canvas help

01-25-2011, 04:34 PM
Hey everyone,

I have been practicing using canvas to make designs. My current code below will load the word the user inputs and makes it bounce around the canvas as well as a text spinner. However, whenever the user inputs a second word, the bounce below stops to start a new one and the text spinner messes up.
I was wondering if anyone could help me so when the user inputs another word, that it either reloads a new textspinner or adds another one, as well as just add the word to the canvas without stopped the old one.

Here's my current script.
Thanks already,

<html xmlns="http://www.w3.org/1999/xhtml">
var ctx;
var a=0.0;
var as=true;//true a is increasing, false decreasing
var x,y;
var xs = 1;
var ys = 1;
var userWord
var myDiv, t;
var test = 0;
var ds ="";//display string
var sli =0; //spinning letter index;

function init(){
ctx = document.getElementById("myCvs").getContext("2d");
userWord = document.getElementById("userWord").value;
setInterval("onEnterFrame()", 50);
myDiv = document.getElementById("myDiv");
for (i =0; i<=userWord.length;i++){
ds += "*";
myDiv.innerHTML =ds;

function textSpin(){
myChar = randomChar();
var newString = userWord.slice(0, sli);
newString +=myChar;
newString += ds.slice(sli+1, ds.length-1);
myDiv.innerHTML = newString;
if (myChar == userWord.charAt(sli)){sli++;}
if (sli<userWord.length){
t = setTimeout("textSpin()", 80);

function randomChar(){
var rc = Math.random()*26 + 97; //random lowercase char code
return String.fromCharCode(rc);

function onEnterFrame(){
if(a>1){as = false;}
if(a<0){as = true;}
if(x>800){xs = -1}
if(y>600){ys = -1}
x+=10 *xs;
y+=10 *ys;


function drawText(){
ctx.font = "20px Times New Roman";
//ctx.fillStyle= "rgb(256,256,256)";
//ctx.fillText("Hello", x, y);
ctx.fillStyle = randomColor();
ctx.fillText(userWord, x,y);
function randomColor(){
var r = Math.floor(Math.random()*150)+55;
var g = Math.floor(Math.random()*256)+150;
var b = Math.floor(Math.random()*20)+50;
var a = Math.random();
return "rgba("+ r+ ","+g+","+b+","+ a+")";

//function randomFont(){
// var s = Math.floor(Math.random()*100) +100;
// return s; //+ "px Times New Roman";}

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
#myDiv {

<body onLoad=""><center>
<input type="text" id="userWord" value=""> </input><br>
<input type="button" id="enterWord" value="Enter Word" onClick="init()" ></input><br><br>
<div id="myDiv" > </div>
<canvas id="myCvs" width="800px" height="600px" /><br>

01-25-2011, 05:29 PM
oh, brother.

it sounds to me a lot like something I came up against here: http://www.codingforums.com/showthread.php?t=210963

aka, a world of pain.

I don't have anything new to add to that - I ended up with a workaround (http://xelawho.com/bus/) that basically ends up reloading the page. But if you do find something, please post back here, I would be very grateful.