HTML5 canvas：重绘整个上下文

Question

I have this <canvas></canvas> with a couple images & text filled/drawn into it. Now I want to apply a slide-in effect on the whole canvas by changing it's offset.

Something like redraw everything on the offset (0,-10).

I know it is possible by redrawing every element and changing their offsets. But as it have many elements drawn into the canvas, I'm trying to avoid producing an excessive code just to move every element. Instead, I want to move the canvas as a whole using:

context.save();
context.moveTo(-10,0);
context.translate(-10,-10);
context.restore();

If I'd change the <canvas> top & left coordinates to do so, will it be hardware accelerated?

Answer 1

Have you tried:

 $("canvas").animate({
       left: 0px //Just an example
 }, "slow");

Above example require jquery

Answer 2

from http://www.urbaninsight.com/2013/01/04/improving-html5-app-performance-gpu-accelerated-css-transitions

If I'd change the top & left coordinates to do so, will it be hardware accelerated?

Yes, but it have to be set on CSS3:

.accelerated {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s ;
}

Well, despite the process can be done with a javascript for() to change the offsets, I think it will be a better code if I use CSS3 HW Acc. instead as there are many elements to be moved at once.