Simple html5+javascript game flickering

Question

The double buffering is in fact allready activated on major browsers. What you need to do is to get in sync with the screen, that's what's provide requestAnimationFrame :
https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

here's the polyfill for requestAnimationFrame :

requestAnimationFrame (rAF) is not standard yet : every 'vendor' i.e. browser (Chrome, FF, Safari, ...) has its own naming.
A polyfill is a piece of code that will 'install' a function in your environement whatever the vendor. Here you will be able to access requestAnimationFrame using window.requestAnimationFrame and you will not care any more about the vendor.
The || operator acts as a 'scan' : it will stop on the first 'truthy' ( == true) expression and return it without evaluating the remaining ones. So the last function definition, for instance, won't get evaluated if msRequestAnimationFrame is defined.
I have to add that the fallback in case requestAnimationFrame is not found is awfull : setTimeout has a very poor accuracy, but thankfully rAF will be found : it is allready there on Chrome(without prefix), Safari (webkit), IE >9 (ms), Firefox (moz) and Opera (o). )

// requestAnimationFrame polyfill
var  w=window, foundRequestAnimationFrame  =    w.requestAnimationFrame ||
                w.webkitRequestAnimationFrame || w.msRequestAnimationFrame ||
                w.mozRequestAnimationFrame    || w.oRequestAnimationFrame  ||
                      function(cb) { setTimeout(cb,1000/60); } ;
window.requestAnimationFrame  = foundRequestAnimationFrame ;

and after exchanging update and render (way better), your run loop will be :

function run() {
   render();
   update();   
   window.requestAnimationFrame(run);
}

run();

in any case you are interested, i discussed the javascript game loop here : http://gamealchemist.wordpress.com/2013/03/16/thoughts-on-the-javascript-game-loop/

Why would you need a timer ? the code above will call run again and again, since run ends by a defered call to run : run will be called next time display is available (typically 60 times per seconds). And you can know about the current time with Date.now().

For more insights about the game loop, rAF, and some time handling issues, see my link above.

Here is your code after some refactoring :

(fiddle is here : http://jsbin.com/uvACEVA/2/edit )

var canvasWidth = 800, canvasHeight = 600;

var canvas = document.getElementById('canvas');
canvas.width = canvasWidth;   canvas.height = canvasHeight;
var ctx = canvas.getContext('2d');

// player definition

var mySprite = {
    x: 200,
    y: 200,
    xvel : 0,
    yvel : 0,
    velIncr : 0.5,
    velAttenuation : 0.95,
    maxVel : 15,
    width: 50,
   height: 50,
   color: '#c00',
  moved : false
};

mySprite.update = function (dt) {
  if (keysDown[37]) {
     this.moved = true;
     if(this.xvel > -this.maxVel){
        this.xvel -= this.velIncr;
      }
  }
  if (keysDown[38]) {
      this.moved = true;
      if(this.yvel > -this.maxVel){
         this.yvel -= this.velIncr;
      }
  }
  if (keysDown[39]) {
      this.moved = true;
      if(this.xvel < this.maxVel){
       this.xvel += this.velIncr;
      }
  }
  if (keysDown[40]) {
      this.moved = true;
      if(this.yvel < this.maxVel){
         this.yvel += this.velIncr;
      }
   }
                     // to have a frame-rate independant game,
                     // compute the real dt in run() and ...
  this.x += this.xvel; // ... use this.x += this.xvel * dt;
  this.y += this.yvel; // ...     this.y += this.yvel * dt;

  if(this.moved == false){
    this.xvel *= this.velAttenuation;
    this.yvel *= this.velAttenuation;
  }
  this.moved = false;
};

mySprite.draw = function(ctx) {
   ctx.fillStyle = this.color;
   ctx.fillRect(this.x, this.y, this.width, this.height); 
};

// Keyboard handling

var keysDown = [];

window.addEventListener('keydown', function(e) {
     keysDown[e.keyCode] = true;
     e.preventDefault();
     e.stopPropagation();
});

window.addEventListener('keyup', function(e) {
     keysDown[e.keyCode] = false;
     e.preventDefault();
     e.stopPropagation();
 });

// requestAnimationFrame polyfill

var  w=window, foundRequestAnimationFrame  =    w.requestAnimationFrame ||
                w.webkitRequestAnimationFrame || w.msRequestAnimationFrame ||
                w.mozRequestAnimationFrame    || w.oRequestAnimationFrame  ||
                      function(cb) { setTimeout(cb,1000/60); } ;
window.requestAnimationFrame  = foundRequestAnimationFrame ;


// main animation loop

function update(dt) {
    mySprite.update(dt); // only one for the moment.
}

function render(ctx) {
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    mySprite.draw(ctx);
}

var dt = 16;  // milliseconds elapsed since last call.
              // ideally you should compute it in run(), i didn't for simplicity
function run() {
   render(ctx);
   update(dt);   
   window.requestAnimationFrame(run);
}

run();