CODEWITHSUNDEEP
htmlsvggraphicshtml5-canvas
sandip
sandip

Reputation: 3289

what is it that you can do with canvas and not with SVG?

I am working on project I need to choose between the SVG and Canvas. I am finding SVG best at most of the things.

Are there anythings that you can not do with the SVG but you can with Canvas?

Upvotes: 0

Views: 397

Answers (2)

markE
markE

Reputation: 105015

First,

If you already have invested time in the SVG learning curve, you might well complete your project without Canvas because these 2 elements do remarkably similar things. Canvas has a fairly large & steep learning curve that you might want to avoid "mid-project".

Contrary to popular opinion...Both Canvas and SVG use vector drawing commands!

They use vector commands to paint lines and curves on their drawing surfaces. Both Canvas and SVG render those drawings onto their element surfaces as pixels.

And...

Both Canvas and SVG can transform (offset, rotate and scale) their drawings. Both Canvas and SVG can apply style to their drawings (fill color, stroke color, opacity, etc).

But...

SVG goes one step further and "remembers" all the drawing commands. This means SVG can reissue those drawing commands even when scaling. So SVG is ideal for drawings that must be scaled without becoming "jaggy". You can even use CSS to re-style your drawings (change colors, opacity, position, rotation, etc). That's often very useful. For example, you can make an SVG leopard change the color of its spots with CSS!

Canvas just "draws and forgets" -- it remembers nothing about what or where it's drawn. As such, it's a lighter element. You say: "But canvas does all those games with moving players". With canvas, the programming practice is to erase the canvas and redraw any shapes in their new positions. This gives the illusion that the shapes are being commanded to move (which they are not). Canvas is built to be extremely fast at these redraws and will easily redraw modestly complex game scenes at 60 frames per second. This speed comes at the cost. You must "remember" where your scene elements are so you can later re-render them in their new positions and with their new stylings. (No simple CSS ability to make a canvas leopard change its spots).

SVG drawings come with the traditional mouse events already built in. Canvas only fires the traditional mouse events on the canvas as a whole and not on individual drawings (because canvas forgets about the shapes it's drawn). Therefore, if you want to get mouse events related to an individual canvas shape you must (1) Remember where you drew your shapes (2) listen for the mouse event on the whole canvas, (3) check if the mouse is inside any shape (this is easily done mathematically) and then handle the mouse event for your discovered shape. Canvas elements require more code to impliment.

IMHO, one particular use-case where canvas shines:

In addition to these functional differences, Canvas lets you examine and change any pixel on the canvas surface. In particular, this valuable pixel information lets you do some nice tasks with images:

  • Recolor any part of an image at the pixel level (if you use HSL you can even recolor an image while retaining the important Lighting & Saturation so the result doesn't look like someone slapped paint on the image),
  • "Knockout" the background around a person/item in an image,
  • Detect and Floodfill part of an image (eg, change the color of a user-clicked flower petal from green to yellow -- just that clicked petal!),
  • Do Perspective warping (e.g. wrap an image around the curve of a cup),
  • Examine an image for content (eg. facial recognition),
  • Answer questions about an image: Is there a car parked in this image of my parking spot?,
  • Apply standard image filters (grayscale, sepia, etc)
  • Apply any exotic image filter you can dream up (Sobel Edge Detection),
  • Combine images. If dear Grandma Sue couldn't make it to the family reunion, just "photoshop" her into the reunion image. Don't like Cousin Phil -- just "photoshop him out,
  • Play a video / Grab a frame from a video,
  • Export the canvas content as a .jpg | .png image (you can even optionally crop or annotate the image and export the result as a new image),
  • Many more image pixel manipulations that haven't come to mind!

Upvotes: 4

Mikko Ohtamaa
Mikko Ohtamaa

Reputation: 83368

Canvas is a pixel manipulation element.

SVG is vector element container.

I feel distinction between these two is outside the scope of StackOverflow to dicuss, as it is related to computer art basics, not programming and there is a lot of information available if not in search engines then in WikiPedia. For example one would use pixel-based media for pixel games.

Upvotes: 0

Related Questions