How to change the ball color every time it bounces off the brick in javascript? -

trying build game following tutorital-

https://developer.mozilla.org/en-us/docs/games/tutorials/2d_breakout_game_pure_javascript/collision_detection

as per exercise im trying change color of ball when hits brick. code fails.

this first question in stackoverflow pardon me grammar mistakes

html:

   <title>gamedev canvas workshop</title>    <canvas id="mycanvas" width="580" height="520"></canvas> 

javascript:

var canvas = document.getelementbyid("mycanvas"); var ctx = canvas.getcontext("2d"); var ctx1 = canvas.getcontext("2d"); var pad = canvas.getcontext("2d");  var x = canvas.width/2; var y = canvas.height-30;  var x1 = canvas.width/12; var y1 = canvas.height-10; var dx = 2; var dy = -3; var dx1 = 2; var dy1 = -2;  var ballradius = 10;   document.addeventlistener("keydown", keydownhandler, false); document.addeventlistener("keyup", keyuphandler, false);  /*paddle creation declaration*/ var paddleheight = 10; var paddlewidth = 75; var paddlex = (canvas.width-paddlewidth)/2;   /* key board button declaration event handling */  var rightpressed = false; var leftpressed = false;        /*brick declararation*/  var brickrowcount = 3; var brickcolumncount = 6; var brickwidth = 75; var brickheight = 20; var brickpadding = 10; var brickoffsettop = 30; var brickoffsetleft = 30;   var bricks = []; for(c=0; c<brickcolumncount; c++) {     bricks[c] = [];     for(r=0; r<brickrowcount; r++) {         bricks[c][r] = { x: 0, y: 0,status:1 };     } }  /*draw paddle function*/ function drawpaddle() {      ctx.beginpath();     ctx.rect(paddlex, canvas.height-paddleheight, paddlewidth, paddleheight);     ctx.fillstyle = "#0095dd";     ctx.fill();     ctx.closepath(); }   function keydownhandler(e) {     if(e.keycode == 39) {         rightpressed = true;     }     else if(e.keycode == 37) {         leftpressed = true;     } }  function keyuphandler(e) {     if(e.keycode == 39) {         rightpressed = false;     }     else if(e.keycode == 37) {         leftpressed = false;     } }  var color1="#0095dd" var color2="#000000"   function drawball() {         ctx.beginpath();  ctx.fillstyle = color1; ctx.arc(x, y, ballradius, 0, math.pi*2); ctx.fill(); ctx.closepath();  }  function drawball2() {         ctx1.beginpath(); ctx1.arc(x1, y1, ballradius, 0, math.pi*2); ctx1.fillstyle = color2; ctx1.fill(); ctx1.closepath();  }   function drawbricks() {     for(c=0; c<brickcolumncount; c++) {         for(r=0; r<brickrowcount; r++) {             if(bricks[c][r].status == 1) {                 var brickx = (c*(brickwidth+brickpadding))+brickoffsetleft;                 var bricky = (r*(brickheight+brickpadding))+brickoffsettop;                 bricks[c][r].x = brickx;                 bricks[c][r].y = bricky;                 pad.beginpath();                 pad.rect(brickx, bricky, brickwidth, brickheight);                 pad.fillstyle = "#0095dd";                  pad.fill();                 pad.closepath();               }          }     } }     function collisiondetection() {     for(c=0; c<brickcolumncount; c++) {         for(r=0; r<brickrowcount; r++) {             var b = bricks[c][r];             if(b.status == 1) {                 if(x > b.x && x < b.x+brickwidth && y > b.y && y < b.y+brickheight) {                      dy = -dy;                     alert("hit")                     ctx.fillstyle=color2;                   b.status = 0;                  }             }         }     } }   function draw() {     // drawing code   ctx.clearrect(0, 0, canvas.width, canvas.height); ctx1.clearrect(0, 0, canvas.width, canvas.height);  drawbricks(); drawball(); drawball2();    drawpaddle();  collisiondetection();   if(x + dx > canvas.width - ballradius || x + dx < 0) {     dx = -dx; }  if(y1 + dy1 > canvas.height - ballradius || y1 + dy1 < 0) {     dy1 = -dy1; } if(x1 + dx1 > canvas.width - ballradius || x1 + dx1 < 0) {     dx1 = -dx1; }   if(rightpressed && paddlex < canvas.width-paddlewidth) {     paddlex += 7; } else if(leftpressed && paddlex > 0) {     paddlex -= 7; }  if(y + dy < ballradius)  {    dy = -dy; }   else if(y + dy > canvas.height) {      if(x >= paddlex && x <= paddlex + paddlewidth) {          if(y= y-paddleheight)         {         dy = -dy;         } }      else {         alert("game over");                document.location.reload();     }  }  x1 += dx1; y1 += dy1;  x += dx; y += dy; } setinterval(draw, 10); enter code here 

in code i'm performing alert whenever brick collided testing purpose.

https://jsfiddle.net/rkr1/kxrqhhhh/