CODEWITHSUNDEEP
javascripthtmlcssgoogle-chromecanvas
user3105109
user3105109

Reputation: 3

javascript animation not working on chrome and IE

This is a matrix-like animation and it works perfectly when tested on Firefox, but on Chrome and IE only the buttons are displayed. It has something to do with the functions for changing color, but actually any extra function i include in the code will make the whole thing not work.

var c = document.getElementById("c");
var ctx = c.getContext("2d");
var color = "blue";

// setting canvas dimension
c.height = 500;
c.width = 500;


//the numbers that will be printed out
var numbers = "0123456789";
//create an array of single numbers
numbers = numbers.split("");

var font_size = 12;
var columns = c.width/font_size; //number of columns for the rain
//create an array of drops - one per column
var matrix = [];
for(var x = 0; x < columns; x++)
    matrix[x] = c.height/font_size+1;

//functions to change the colour of the matrix
function setBlue() color = "blue";
function setGreen() color = "green";
function setRed() color = "red";

//drawing the matrix
function draw() {
    //black background with transparency so that the drops leave trail
    ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
    ctx.fillRect(0, 0, c.width, c.height);

    if (color == "blue"){
    ctx.fillStyle = "#00ffd2";
    }else if (color == "green"){
    ctx.fillStyle = "#0f0";
    }else if (color == "red"){
    ctx.fillStyle = "#ff0008";
    }

    ctx.font = font_size + "px papyrus";
    //loop the drawing
    for(var i = 0; i < matrix.length; i++)
    {
        //print random character
        var text = numbers[Math.floor(Math.random()*numbers.length)];
        ctx.fillText(text, i*font_size, matrix[i]*font_size);

        //add randomness and send the character to the top of the screen
        if(matrix[i]*font_size > c.height && Math.random() > 0.95)
            matrix[i] = 0;

        matrix[i]++;

    }
}

setInterval(draw, 30);

Upvotes: 0

Views: 136

Answers (1)

markE
markE

Reputation: 105045

Oops! Your function definitions are malformed...

Try this:

//functions to change the colour of the matrix
function setBlue(){ color = "blue";}
function setGreen(){ color = "green";}
function setRed(){ color = "red";}

Good luck with your project!

Upvotes: 1

Related Questions