Combine vector benefits with Bitmap in an HTML canvas element - how?

Question

What I'm trying to do is create a game with extreme zoom on the canvas element. I would like to take advantage of the fact that vector graphics has the ability to be programmatically created at runtime with high performance bitmap images.

What I would like to do is programmatically create an image of the first frame of the game "sprite" ... it will be a vector image. However, after the first frame, I do not want to waste time on processor cycles when drawing an image. I would like to cache it as a bitmap / high-performance image for this zoom level.

After that, if the user enlarges the image by> 20%, I will then redraw the image with a higher level of detail of the vector image. As above, this vector image will then be cached and optimized.

As you can see here, it will be a fairly simple spaceship. I would first make it programmatically as a vector, and then ... a raster, I think? The goal is to avoid processor loss.

If the user scales ...

A new vector image of the same shape will be created, albeit with a much higher level of detail. It is basically a level of detail system. In this case, after the initial software draw, I would “rasterize” the image for maximum performance.

Does anyone have any ideas on what tools I need to make this a reality inside an HTML canvas? (The rest of the game will be launched inside the canvas element.)

Thanks so much for your thoughts.

** Edit: I wanted to add ... maybe the way to render the image via SVG (programmatically), and then clicking this png file on the canvas using drawimage () may give some success? Something similar to? Hm ...

Answer 1

I managed to answer my own question.

The way to do this is to first create the SVG file and then convert it to a PNG file on the client using "canvg". PNG can be created at different levels of detail based on what you want, and in this way you can create a dynamic LOD system.

Flash does something similar automatically by cashing a raster image of an SVG file ... it's called pre-rendering. If SVG does not scale or alpha does not change, flash will use only a bitmap instead (much faster than when re-rendering the SVG file, in difficult cases). The size (and therefore the granularity) of the PNG output can be resized as you like, and therefore pre-rendering can also be done based on events.

From this information, I decided to implement the LOD system, so SVG is used while the user is actively scaling (scaling the target "sprite"), and then, when the scale slows down, calculate the preliminary visualization of PNG. Also, at an extremely high level of scaling, I just use SVG, since the CPU is much easier to compute high-resolution SVG and then bitmaps that cover most of the screen. (just take a look at some of the HTML5 icon tests that have a lot of icons on the screen ... the more the icons, the slower it works).

Thanks a lot to all the comments here, and I hope my question / answer helped someone.

Answer 2

Check out this article, but there seems to be no standard method for doing what you want, and this can lead to an error in IE.

http://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/#svg_to_canvas

Perhaps you should go with the whole SVG game or provide the maximum zoom speed for your game and use large images as sprite assets. this would not be a problem when using flash, but I think that you will not play with the flash anyway.

Perhaps there is a structure that can convert SVG into a "canvas drawing sequence", but I would not bet on high rates in this case.