I am using html5 to build a game and it is based on Canvas not webGL. I am trying to build sprites from canvas object not from images. Because there will be many sprites on the screen and each of them has different size and moves to different direction I would be using many canvas objects. I wonder if it's OK to put so many canvas objects on the browser screen. Will this make the game very slow?
Elements not in tbe DOM don't affect the rendering performance because they aren't used by the DOM renderer. They only take up a bit of memory but until you have couple thousand of them or they each have insane resolutions, then you won't have a problem with this.
Whileit is possible to have hundreds of canvas elements being dynamically resided using CSS, it is not recommended because your code can get very ugly very fast. it is far easier to render sprites on the same canvas if you are building a serious game. If this is just a theoretical question, then yes, expect a severe increase in load time simply because CSS, being a style sheet language, was not built to handle advanced keyframing and animation. Just use one canvas.
Having more than one canvas is a good way of improving performance actually.
And from my tile-world example I had two canvases with one of them being 3840px wide and high. But performance was still good. You can try it out here and/or look at the code on github if you are into that stuff.
If I didn't use two canvases I'd have to redraw a whole 3840px world or you'd have to come up with a method of knowing who's within the player's sight range and only draw them. Doing that again a single canvas is a bad idea, a better idea would be to draw the background/world on one canvas and never touch it again. Then add enemies and the player on their own respective canvases. You can read the full explanation here: Camera movement, Draw grid
Hope this was helpful! Have a good day :D