Question

I wanted a rectangle to move horizontally..However, the rectangle is not animating..How do I fix this?

<script type="text/javascript">
var interval = 10;
var x=0;
var y=0;
var rect = null;
var context ;
var canvas;

function Rectangle(x, y, width, height, borderWidth) {
  this.x=x;
  this.y=y;
  this.width = width;
  this.height = height;
  this.borderWidth = borderWidth;
}

function DrawRects(){
  myRectangle = new Rectangle (250,70,100,50, 5);

  context.rect(myRectangle.x,myRectangle.y,myRectangle.width,myRectangle.height)
  context.fillStyle="#8ED6FF";
  context.fill();
  context.lineWidth=myRectangle.borderWidth;
  context.strokeStyle="black"; 
  context.stroke();
}

function updateStageObjects() {
  var amplitude = 150;
  var centerX = 240;    
  var nextX = myRectangle.x+ 10;

  myRectangle.x = nextX;    
}   

function clearCanvas() {
  context.clearRect(0,0,canvas.width, canvas.height);
}

function DrawRect(){
  alert("Test1");
  setTimeout(CheckCanvas,10);

  //clearCanvas();

  updateStageObjects();

  DrawRects();
  alert("Test2");
}

function CheckCanvas(){
  return !!(document.createElement('canvas').getContext);
}   

function CheckSound(){  
  return !!(document.createElement('sound').canPlayType)
}

function CheckVideo(){
  return !!(document.createElement('video').canPlayType)
}

function Checkstorage(){
  return !!(window.localStorage)
}

function CheckVideo(){
  return !!(document.createElement('video').canPlayType)
}

function DrawCanvas(){
  if (CheckCanvas()){
    canvas = document.getElementById('Canvas');
    context =canvas.getContext('2d');

    $('#Result').text('Canvas supported...');
    $('#Result').text($('#Result').text()+'Sound supported...'+CheckSound());
    $('#Result').text($('#Result').text()+'Video supported...'+CheckVideo());   
    $('#Result').text($('#Result').text()+'Storage supported...'+Checkstorage());

    DrawRects();
    setInterval(DrawRect(), 10);
  }
}
</script>

Html:

<canvas id="Canvas" width="800px" height="800px" onclick="DrawCanvas()"> Nor supported</canvas>

Answer 1

You need to do

setInterval(DrawRect, 10);

Using DrawRect() will invoke the function once, and then try to call the result of that function, as a function (which it isn’t) every 10 milliseconds.