Got DOMException when having filter with horizontal or vertical line

[kevinlo]

Got the following DOMException

canvg.js:2854 Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
    at svg.Element.filter.apply (file:///E:/temp//canvg.js:2854:12)
    at svg.Element.line.render (file:///E:/temp//canvg.js:882:37)
    at svg.Element.g.renderChildren (file:///E:/temp//canvg.js:904:27)
    at svg.Element.g.render (file:///E:/temp//canvg.js:885:15)
    at svg.Element.svg.renderChildren (file:///E:/temp//canvg.js:904:27)
    at svg.Element.svg.render (file:///E:/temp//canvg.js:885:15)
    at draw (file:///E:/temp//canvg.js:3109:10)
    at Object.svg.loadXmlDoc (file:///E:/temp//canvg.js:3119:8)
    at Object.svg.loadXml (file:///E:/temp//canvg.js:3017:10)
    at canvg (file:///E:/temp//canvg.js:98:10)

with the following SVG:

        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="500" height="210">
            <defs>
                <filter id="abc" filterUnits="userSpaceOnUse">
                    <feOffset dx="1" dy="1" result="offsetblur"/>
                    <feFlood flood-color="#00FF00"/>
                    <feComposite in2="offsetblur" operator="in"/>
                    <feMerge>
                        <feMergeNode/>
                        <feMergeNode in="SourceGraphic"/>
                    </feMerge>
                </filter>
            </defs>
            <g class="Distance">
                <line x1="10" x2="10" y1="100" y2="200" filter="url('#abc') " style="stroke:red"/>
            </g>
        </svg>

I think the problem is the feOffset is not supported and its dx and dy values are ignored. So, the extraFilterDistance is zero. It causes the width or height parameters to the drawImage function to be zero at the drawImage cal:

      // render on me
      ctx.drawImage(c, 0, 0, width + 2 * px, height + 2 * py, x - px, y - py, width + 2 * px, height + 2 * py);

Can you add the check (width + 2 * px) or (height + 2 * py) to be positive before it calls the drawImage?

[gabelerner]

seems like a valid issue. i don't have time to open PRs but feel free to submit one!

[dangreen]

@kevinlo Thanks for an issue.

@kevinlo @gabelerner I can take it soon

[dangreen]

@kevinlo Hi! Before release you can test fix on demo page: https://canvg.github.io/canvg/demo/index.html?url=../svgs/issue747.svg

[dangreen]

@kevinlo canvg@3.0.6 was released

[kevinlo]

@dangreen I test it on the demo page, it is fixed. Thanks!

The current solution does not render it. Do you know when the feOffset will be supported?