# Bulletproof 20150917-0

9月17日凌晨的脑洞，有可能能优化 Canvas2D 版的实现

I have applied some CSS3 filters to an image on a canvas like this:

-webkit-filter brightness(0%) grayscale(100%) contrast(1000%)

But when I save the image to my computer, the original image is being saved, not the one with applied filters. Is there a way to save the modified version of it?

（很明显，<canvas> 要作为整个 DOM 元素参与样式计算，而不是其上的像素内容，相当于缓冲区内容。所以直接应用样式是不可以的，我以前试过。）

Apply the filter in the canvas using a shader, rather than using a CSS style.

Alternately, make a hidden canvas, draw your content to that, apply the CSS3 filter to it, and then use that canvas to output to the visible one.

Put the filtered canvas into SVG foreignObject, then insert the serialised SVG as a Base64-encoded image into the visible canvas. (Just kidding)

Video Destruction 的示例如果将定时函数换为 requestAnimationFrame()，会引发严重的效率问题。狂点一通，帧率就从60直降到不到10。相比之下，稳定调用帧率30效果好一些。——直觉上来讲，和 Bulletproof 最初的三维球示例是相反的。

Additionally SVG allows embedded content using HTML5 ‘video’, ‘audio’, ‘iframe’ and ‘canvas’ elements.

Pixi？