search

spatialillusions / milsymbol

Military Symbols in JavaScript
www.spatialillusions.com/milsymbol
MIT License
549 stars 134 forks source link

Canvas output #35

Closed spatialillusions closed 8 years ago

spatialillusions commented 8 years ago

This might be too much work, but I'm looking into canvas output. Please comment if you are interested in this or if I will be wasting my time.

spatialillusions commented 8 years ago

Initial tests up and running, so far so good. It's the icons that could be the tricky part, but I'm doing one part at a time. This is not drawing the SVG to a canvas, this is raw canvas instructions. :-)

screen shot 2015-12-09 at 23 17 57
spatialillusions commented 8 years ago

Most of the icons are implemented now as well and I have had time to run some performance tests. The new drawinstructions that then is parsed to SVG or Canvas makes an over all performance hit, so we will loose some speed, but not that much when generating SVG. (1000 symbol speedtest on my computer went from 18milliseconds to 24milliseconds.) Generating Canvas is slower than SVG, and the speedtest gives an average of about 120milliseconds, not as fast as I would like, but still quite good. A new setting for milsymbol will be introduced: MS.autoSVG, if this is set to true everything will work the same as today, and you can just keep using new versions of milsymbol, true is the default value. If MS.autoSVG is set to false it will not automatically generate SVG output and you will have to run symbol.asSVG() to get the SVG XML. There is also one method asCanvas() that will give you a canvas element with the drawn symbol, and processCanvasInstructions(ctx) where you can provide your own canvas for the symbol to be drawn on.

bensleveritt commented 8 years ago

Just to add that we've done SVG to canvas texture rendering, so this is actually very welcome.

Thanks!