Canvas vs Div

Question

What do you think about ?

Advantages and Disadvantages

Answer 1

https://code.sololearn.com/WjqUO6L5rEHx/?ref=app

https://code.sololearn.com/WKBjdSQRePhP/?ref=app

https://code.sololearn.com/WYd6M8hmGWp9/?ref=app

https://code.sololearn.com/WZX0ghGM5ZTy/?ref=app

The code above are amazing. I love these game. Some game made with canvas and other made with div.

Madhav Martin Adnan Zawad Toky

Answer 2

Sololearn teaches animation using div, but same animation i can make with canvas.

I think I can make same thing using div or canvas.

Answer 3

Div is used to group elements like <img/> <h1></h1> <p></p>... When you want to add them same features (styles) - like when you want to make more elements to be aligned to a center. Div will make end of a line. (span not | span is almost same like the div)

Canvas is used to draw 2D grapics in your HTML page with scripts however it can't be used as element to group other items.

Answer 4

Pedro H.J
Divs are very often used for smaller animations, they are much sharper or "crisper" than canvas. Also the different shapes you can apply to a div gives a much more flexible designing. Therefore I prefer div animations for smaller things. However too many divs on one page can very quickly result in heavy lagging. Therefore I recommend using a canvas for bigger or more complex animations with many elements. Another option would be svgs, which woule be quite similar to using divs. Looks better but lags faster 😉 Here I have a comparison of SVG and Canvas.
https://code.sololearn.com/WeGy2d54U3tM/?ref=app

In my Game you tagged, Vision, I needed to do many calculations for collision and stuff. There it also is very useful to have everything in one Canvas so it is easier to implement different interactions between the elements. There would also be quite a lot of html elements on one page if I had used divs, which would have made the game very laggy.

Answer 5

I have a lot of canvas and css animations as codes.

Its easier to learn drawing on canvas and if you're technically good with numbers etc then you will excel. However it is a lot harder to place events on the canvas and the graphics are worse there. And not everyone's browser can support canvas...

CSS is nice but it takes a lot longer to draw things. Its easy to learn but hard to master. (Positioning etc) CSS ELEMENTS were never made to draw shapes - it's very hard and annoying to draw a triangle for example. But the graphic content is top notch.

Answer 6

I have a question within a question.

I tried rotate rect using canvas but it rotate all. So i am back to div and span because css animations is easy.

😧

Answer 7

//SOLOLEARN use div because it is hard to master javascript for all to actually work with canvas, so it's better to work with html and css😅😅

Answer 8

According to me both are different (I mean I use both for different purposes)

1) Div: I personally use it as a container which are used for styling tags through CSS

2) Canvas: I personally use it for making 2D images

• I am talking about my usage I know both of them have some similarities but both are important

Answer 9

Hi guys after many days i find some time and written one code for explaining spread operator in js you can check it.
https://code.sololearn.com/Wyhqm02KC5Nc/#js

Answer 10

I have to get used to time limits in my challenges it throws me off big time any ideas anyone