HTML5 canvas Performance

HTML5 canvas Performance

This article focuses on the Performance of HTML5 canvas. The scenario is to draw circles on the canvas.

I 've been trying to use HTML5 canvas to draw bubbles on a Christmas tree image. Because I don't know which method is the best, I finally found the answer to drawing a circle using radial gradients (radiation gradient) on Stack Overflow.

Circle

You may already know that the standard way to draw circles is to usearc(): Share the best UI front-end framework!

. Code

1. // Drawing a circle the traditional way
2. Ctx. beginPath ();
3. Ctx. arc (x, y, radius, 0, Math. PI * 2, true );
4. Ctx. fillStyle = 'rgba (195, 56, 56, 1 )';
5. Ctx. fill ();
6. Ctx. closePath ();

   In my opinion, this method of drawing circles is a bit cumbersome compared with the SVG example. I think using radial gradients is a more wise choice, but I don't know how it works.

   . Code
   1. // Drawing a circle with a radial gradient
   2. Var gradient = ctx. createRadialGradient (x, y, 0, x, y, radius );
   3. Gradient. addColorStop (0.95, 'rgba (195, 56, 56, 1 )');
   4. Gradient. addColorStop (1, 'rgba (195, 56, 56, 0 )');
   5. Ctx. fillStyle = gradient;
   6. Ctx. fillRect (x-radius, y-radius, x + radius, y + radius );

      Without a doubtarc()Slower. Several times slower! You can try it on the test page to see the speed gap.

      If I think correctly, I should realize this without having to test it, which can save some time. But next I tried to use a sphere (not a 3D sphere, of course, a colored gradient circle ). Share the best UI front-end framework!

      Sphere

      There are two common methods to draw a sphere in the canvas:

      Radial grandients

      . Code
      1. // Drawing a sphere with radial gradients
      2. Var gradient = ctx. createRadialGradient (x, y, 0, x, y, radius );
      3. Gradient. addColorStop (0, 'rgba (255,255,255, 1 )');
      4. Gradient. addColorStop (0.2, 'rgba (255, 85, 85, 1 )');
      5. Gradient. addColorStop (0.95, 'rgba (128, 0, 0, 1 )');
      6. Gradient. addColorStop (1, 'rgba (128, 0, 0, 0 )');
      7. Ctx. fillStyle = gradient;
      8. Ctx. fillRect (x-radius, y-radius, x + radius, y + radius );

         Use drawImage () to draw an image with the same edge color as the background color (or transparent, and can be integrated with the background)

         . Code
         1. // Drawing a sphere with an existing image
         2. Var img = new Image ();
         3. Img. src = 'images/baubles.png ';
         4. Ctx. drawImage (img, x, y, width, height );

            As in the previous example, radial gradients is several times slower. Of course, the advantage is that radial gradients can be dynamically changed in real time, and the local rules of image painting need to be prepared in advance. Those images cannot be directly modified using javascript, although you can easily modify their display size. You can also control the color in the following ways:

            1. Sprite

            2. Use grayscale images andarc()To set the translucent floating layer

               Don't forget that using images means they need to be downloaded, so remember to pre-load images if possible.

               You can test the performance on the test page. Share the best UI front-end framework!

               You can see that the floating layer method is slow, but it is faster than gradients. In terms of color control, it also gives you more freedom, but all local methods are slower than simply drawing original images.

               Summary

               In general, for simple programs or fast hardware, these speed differences are hard to notice. However, if you are using animations, making high-performance games, or designing programs for hardware such as TV/set-top boxes, they will become a problem. As always, all decisions are a compromise, so the following is a summary of the trade-offs:

               • If you want to draw a circle, usearc()

               • If you want to draw a sphere, use an image (preload it)

               • If you draw a variety of images, use the image sprites

               • If you want the sphere to dynamically change the color, consider using an image and a translucent floating layer.

               • Radial gradients can only be used as a last resort

                 Update:

                 Marcelo proposed a cool method: create a simple image on a hidden canvas, and then usedrawImage()Repeat it. This method avoids image creation and allows you to change the color instantly. The best thing is that, without considering the gradient initialization time, It is faster than drawing an existing image! The Code is as follows: share the best UI front-end framework!

                 . Code
                 1. // Create a second "buffer" canvas but don't append it to the document
                 2. Var tmpCanvas = document. createElement ('canvas ');
                 3. Var tmpCtx = tmpCanvas. getContext ('2d ');
                 4. // Add the necessary gradients here, as abve
                 5. // Draw the image from the second "buffer" canvas
                 6. Ctx. drawImage (tmpCanvas, x, y, width, height );