DOM vs. Canvas

For visually complex tasks, know when to use the DOM and when to use canvas by learning about the two drawing modes used under the hood.

[@nithishkarthik9163]

Thank you. It was really helpful. There is not a lot of content regarding this in the web.

[@p1nesap]

Excellent overview/comparison, and to the point. Great job.

[@sweeball]

Thanks Kirupa. I'm just starting to learn canvas and I think your videos will be very useful.

[@codeChris]

Beautiful explanation. I am going to be focusing more on web animation and with all the technical advantages and disadvantages of CSS vs J's vs canvas it can be allot to to choose from. Keep up the good work

[@somahargitai9251]

Do you have any resources for canvas drawing optimiziation? We've started with canvas (react + konva) but it turned out that it is super easy to run into situations where it is becoming slooooow, especially if you so not simple animate but handle clicks, dragging, creation and removal, including many objects - even if the objects are super-basic (lines (paths), rectangles, texts).

[@m00semanus]

Thanks for the excellent explanation.

[@Flygodz4life]

This was pretty awesome. Answered my questions on which one to use.

[@kirupa]

That's great, Rathesh! Glad it helped :-)

[@berma3726]

Well done Video, good job!

[@amatiashevich]

thanks, man!

[@chatoninja131]

Do you know you're really look like a character of the epic show Parks and Recreations which I forgot the name ?

[@AlphaBeta-vq6ks]

Any tips on creating animations in the canvas? On a similar level to DOM animations.

[@kirupa]

This article may be just what you are looking for! www.kirupa.com/canvas/creating_animations_canvas.htm

[@AlphaBeta-vq6ks]

@@kirupa any tips on ensuring that you can zoom on the canvas and keep the same resolution/ not get pixelated?

[@kirupa]

@@AlphaBeta-vq6ks Just redrawing the visuals again. That's the only viable option where you detect the zoom level and draw all the shapes at a size proportional to the zoom level.

[@bapakyulianto6520]

thanks bro ... you are my master ninja ... :d

[@kirupa]

haha, thanks for the nice comment! :P

[@worldofstrings]

mr. kipupa your a good teacher but there's one thing i want to learn. I'm a big fan of background movement which can make any image more animatible. I also think that your limited to how much move you can make on a small canvas or computer screen which can be boring at times..Can you please teach background movement or loping? i haven;t brought your book yet but trust me i will.. thanks!!!!

[@kirupa]

Randy - can you point me to an example or video of what you are referring to? Do you mean something like my falling snow effect? :-)

[@crazieeez]

So if you want to build a web app that resembles Adobe Photoshop or Figma, you use Canvas. If you want to build a web app that resembles Facebook, Twitter, KZbin, Whatsapp, you use DOM.

[@neryasheetrit]

Are you the one who wrote the canvas ninja book?

[@kirupa]

NERYA SHEETRIT yes, I am :-)

[@old_sport]

Good video. I felt you missed an important topic , accessibility!

[@kirupa]

+Ollie _ You are absolutely right! I'll address that in a future revision :-)

[@andrewnormore7093]

Hi friend! I just watched your video. You seem like a guru at this question. Would you want to help me out? I'm running a game at www.StarCommanderOnline.com - it's using HEAVY dom elements to do most of the game, but the stars in the background are done on Canvas. I found this library at velocityjs.org - which replaced jquery animate with jquery velocity. Apparently this uses the canvas type methods or something...What do you think? Should I consider re-vamping my game to use entirely canvas? CHEERS and thanks!

[@kirupa]

It's hard to answer one way or the other without you telling me if you are seeing performance issues right now. If you don't see or hear about any issues, I wouldn't worry about it :-)

[@andrewnormore7093]

Ahh I see. I think there are performance issues. Mobile browsers are very slow, and clunky feeling. I have this week to debug it all, so maybe just cleaner code may fix that. But even calling a menu drop down is like.. really slow!

[@andchoqmx7588]

i will have to go with canvas wish me luck

[@radekpiekny2837]

"everyone loves css" You might be the only one dude..

[@djudsod959]

True!

[@NikicaVaradi]

nice fake background :)

[@kirupa]

Haha