javascript - Canvas pre rendering? -

Is there a point in pre-rendering images on the canvas?

An example,

  var img; // Image object var pre = document.createElement ("canvas"); Pre.width = img.width; Pre.height = img.height; Var precon = pre.getContext ("2d"); Precon.drawImage (IMG, 0, 0); Var canvas = document.createElement ("canvas"); Var ctx = canvas.getContext ("2D"); (Var i = 0; i & lt; 10000; ++ i) {ctx.drawImage (formerly, Math.rendum () * canvas.withth, monastery. Raidem (canvas.);); }   
 I do not see any point because you are still calling  context.drawImage , no matter what you do, as long as the canvas API is a Can not draw drawing faster than image, instead of image object canvas object?   
 
 
 First of all, I should say that your example is not suitable for highlighting pre-rendering of canvas Needs and Benefits  
 I give you a better example, you need to attract multiple times, which requires heavy calculations on a canvas.  
 Assume that you have this  attracted  function:  
  function complex draw (CTX) {ctx.drawImage (IMG, width, height ); // Heavy calculation goes here / some conversion can be CTX.ctx.setTransform (-1, 0, 0, 1, 200, 200); Ctx.fillStyle = "RGBA (100, 100, 255, 0.5)"; Ctx.fillRect (50, 50, 100, 100); // Perhaps another img / video / canvas CTXDrawaImage (second IMG, width, height) to draw; // ...} function draw () {complexDraw (ctx); }   
 Now say that you want to present the current time on the canvas too. This means that we want to add it to the bottom of our  draw  function:  
  function dottime (CTX) {ctx.fillText (new date). GetTime (), 10, 50); }   
 And now our Draw function looks like this:  
  function draw () {complexDraw (ctx); DrawTime (ctx); }   
 Since you always want to show the current time, you must call the  Attractive  function each second:  
  setInterval (Draw , 1000);   
 This means that in every second you are doing some heavy calculations to update a small text.  
 If there is only one way to calculate the need for dividing the function and computing ... but there it is: say hello Canvas pre-rendering !  
 The main idea is to attract the part that does not change on a different canvas (and do not need to re-calculate) - Let's call it  cacheCanvas  - and whenever we redraw the content If you want to do this, copy its content on the canvas of our app:  
  // Assume that we have a clone function variable cache convases = clon (canvas), cache CTX = cacheCanvas .getContext ('2D'); // Drawing our complex stuff on Cash Canvas Complex Draw (Cash CTX); // To make a copy of the result of our main 'Draw' function `Complex Draw '// function, do not make it to call the function draw () {ctx.drawImage (cache height, width, height); DrawTime (); }   
 And now we are basically reprinting each other canvas, but we're not computing any heavy work in  intricate scare  .  
 I just want to know that most canvas based games can not run at 60fps (  60 seconds per second ),  pre-rendering  Or another technique called  canvas layering  (which is also worth exploring).