StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>Just some random thoughts about your situation</strong></p> <p>While html canvas does have a few compositing modes, <em>canvas doesn't have an image multiply blend.</em></p> <p>However, Firefox does! It's a multiply blend extension to compositing:</p> <pre><code>ctx.globalCompositeOperation = 'multiply'; </code></pre> <p>The major canvas libraries that have SVG-->Canvas translators are FabricJS and KineticJS, but neither of them have implemented this multiply filter yet. Of the two, FabricJS is more SVG capable at this point and I see Kangax (FabricJS's creator) has commented on your post. You might ask him really nicely if he would add a multiply filter ;)</p> <p>Since you seem to have access to Adobe Illustrator, you might try out Mike Swanson's impressive SVG-->Canvas translator. I don't know if it handles image filters, but it does an impressive job of taking standard Adobe Illustrator SVGs and creating Canvas drawings (very impressive app, if you ask me!): <a href="http://blog.mikeswanson.com/post/29634279264/ai2canvas" rel="nofollow noreferrer">http://blog.mikeswanson.com/post/29634279264/ai2canvas</a></p> <p>Thinking inside SVG -- you should check out the SVGJS library:</p> <p>SVGJS is an SVG library that lets you manipulate SVG elements by ID.</p> <p><a href="https://svgdotjs.github.io/" rel="nofollow noreferrer">https://svgdotjs.github.io/</a></p> <p>There is also an extension that imports from Illustrator:</p> <p><a href="https://svgdotjs.github.io/importing-exporting/" rel="nofollow noreferrer">https://svgdotjs.github.io/importing-exporting/</a></p> <p>And finally SVGJS also has an extension that does a darken image filter (not multiply, but close)</p> <p><a href="https://svgdotjs.github.io/plugins/svg-filter-js/" rel="nofollow noreferrer">https://svgdotjs.github.io/plugins/svg-filter-js/</a></p> <p>If you get desperate...(unlikely you'll get this desperate!)</p> <p>You could "roll your own" multiply filter by grabbing the canvas pixels with context.getImageData and then running this function on each of the r,g,b elements of the pixels you want to multiply.</p> <pre><code>function multiply(top, bottom){ return(top*bottom/255; } </code></pre> <p>Good luck!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload