Advantages of canvas?

Question

I don't get the purpose of canvas - it is more pixelated, there are no animations and objects can't be changed afterwards.
When should I use canvas, what are the advantages?
Thanks in advance!

Answer 1

@Kamil wrote: "check out my '2018 countdown' code, that's pure Canvas 😀"

That's not pure canvas... background animation is effectivly pure canvas, but the countdown itself is handling by classical dynamic html ;P

Anyway, canvas is the only way to access content at pixel level. This is the main "advantage", but I think it's more right to talk about "specificity" ^^... because it's advantage or not depending on your case needs ;)

Answer 2

for making 2d browser games ^^

Answer 3

check out my '2018 countdown' code, that's pure Canvas 😀

Answer 4

We can make simply anything in canvas , used mainly for making games and other complex animations .The advantage of using canvas is that it's light weight , vector based graphics like(SVG or div) can be quite heavy if you make complex things.

Answer 5

for starters, it is very easy to work with.
it have a lot of simple methods for various purposes.
you have many examples in the code playground for a lot of different usages (games, simple/complex animations, more games, pretty sure i saw a monte carlo method for finding value of PI on a canvas....)

check some of my codes for some examples and there are many many more in the playground

Answer 6

@visph yes you're right😓, but maybe I meant the fireworks, which are drawn on a canvas 😉😂😂😂

#makeVisphAModerator

Answer 7

Thanks for all your answers!

Answer 8

there can be animations and object can be changed, with help of Javascript. checkout this channel, which makes use of canvas through a Javascript Librarie called p5.js:

https://youtu.be/hacZU523FyM

also, check my code with canvas using p5.js:

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

Answer 9

With HTML5 Canvas, you can do a lot of things. Drawing images, primitive shapes, advanced shapes like polygons, creating animations and even games. SVG and the DOM can be used but where canvas might outperform is that it can handle a lot of drawing. Drawing a hundred shapes can get tedious and messy in SVG. The DOM should mostly be used as a fallback for browsers that do not support the canvas, and for simple games.

It is true that once an object is drawn on a canvas, it can't be changed. But isn't that how a real life canvas works? You'd have to clear the canvas to redraw on it. Thankfully, we are provided with approaches to clear the canvas: by filling it with a color or by erasing the portion of the canvas. So, if you desire to have an object that should move, create a storage mechanism for it, probably an object or a dedicated class. Store whatever properties you want like it's position and size on the canvas. Then update this object whenever necessary, clear the canvas portion it occupies and redraw it.

I read a tutorial on handling DOM sprites efficiently but still the canvas is a viable approach to web graphics. Like visph said, you get access to every single pixel on the canvas. This way you can tint the pixel colors, change them and so much more! All on the fly!

In essence, animations, shape and pixel manipulation, colorful graphics and creativity can be manifested with a canvas. Once the context is retrieved, it's as easy as **pie**. The disadvantages do not outweigh the advantages to me. What you should worry about is the different ways browsers would implement context methods and properties, meaning that the speed and accuracy at which a browser handles a canvas might differ from another.