Multiple html5 canvas elements: performance issue?

Question

Regardless of the javascript, is there a performance problem when adding multiple html5 canvas elements for the purpose of displaying canvas made icon? I mean is there a difference performancewise between a div and canvas sematic element?

I am trying to step away from images, svg and even fontawesome, thats why im asking.

Answer 1

Based on the request, I have this short code:

 var canvas = document.createElement("canvas"); canvas.width = 250; canvas.height = 80; var ctx = canvas.getContext("2d"); ctx.fillStyle = "#000"; ctx.fillRect(0, 0, 250, 80); //draw a red box ctx.fillStyle = "#FF0000"; ctx.font = "30px Tahoma"; ctx.fillText("Hello World", 45, 50); var dataURL = canvas.toDataURL(); document.getElementById("img-data").innerHTML = dataURL; document.getElementById("canvas-mirror").src = dataURL; 

 <div id="img-data"></div> <img id="canvas-mirror"></div> 

In short,

1. Create canvas element with javascript. You don't have to include it into html, why would you? This way it might be a little bit faster.
2. Use canvas.getContext 2d, WebGL or whatever you want to do. This is essential, once you choose method, you shouldnt change it! (Dont use it twice on same canvas.)
3. Draw anything you want.
4. Get data from canvas back. Now the most known way is to use "high level" method toDataUrl. This is good and easy to do. But in case of more complicated application, you might choose also different methods, for example webgl has readPixels which is faster, like really fast, you get smaller data and you can also use scissors before, but it is also much harder to code.
5. Use data for image. In case of base64 it is valid param for img src property. WebGL readPixels must be transformed first. It might be binary blob or base64.

Answer 2

Yes,

Performance depends on the total area of all canvases, try to keep it( total area of canvas) small.

If you are planning to use canvas then try to use clipping option , it will increase performance.