Menu
I'm a Flash developer, and I'm working on a JavaScript port of a game. In the Flash version, I use glow, blur and color matrix filters to manipulate the appearances of display objects. I would like to do the same with my JavaScript view. Some of these are embellishments, while others are used to carefully produce a desired result. Because this project's goals are to create an exact port, I'm wondering what options I have to apply filters to raw canvas data, to inline SVG tags or to straight up DOM elements.
I've considered Pixastic, but my collaborator insists on a GPL license for the time being, which means any tech I use must be GPL compatible. Pixastic uses the Mozilla Public License, so I can't use it. (Which is a huge bummer, let me tell you.)
I'll say it again concisely: how do I efficiently apply pixel filters to DOM elements, to canvas image data or to SVG tags with JavaScript?
447
The ImageData interface represents the underlying pixel data of an area of a <canvas> element. It is created using the ImageData() constructor or creator methods on the CanvasRenderingContext2D object associated with a canvas: createImageData() and getImageData() .
Set your DPI to 300 or Higher. For accurate photo reproduction on canvas, ensure that you set your image to at least 300 DPI. If you set the DPI too low, it will result in fuzzed-out, poor-quality images. This can be straightforwardly easy when working with a porous-stock like canvas.
<canvas> is an HTML element which can be used to draw graphics via scripting (usually JavaScript).
Here's an example showing some svg filtering:
and the corresponding canvas version:
Here are some js libraries for canvas doing what I think you're looking for:
A number of svg filter examples can be found on http://svg-wow.org (CC0 licensed).
109
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
