HTML5 Canvas DrawImage() Not Working On FireFox

The problem: I'm working on a project where I need to animate the drawing of a symbol on a canvas. This is great and working on chrome, but on FireFox it doesn't draw anything. No

Solution 1:

Answer :

The problem indeed wasn't the drawImage() method. It was the way that I've written the svg.

Wrong:

<svg class="svg x-color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 403.54 403.54">
            <defs>
                <style>
                    .shape{
                        fill: transparent;
                        stroke-dasharray: 570;
                        stroke-dashoffset: 570;
                    }
                </style>
            </defs>
            <line id="s1" class="shape" x1="1.77" y1="1.77" x2="401.77" y2="401.77"/>
            <line id="s2" class="shape" x1="401.77" y1="1.77" x2="1.77" y2="401.77"/>
        </svg>

Good:

<svg class="svg x-color" xmlns="http://www.w3.org/2000/svg" width="403.54" height="403.54" version="1.1">
            <defs>
                <style>
                    .shape{
                        fill: transparent;
                        stroke-dasharray: 570;
                        stroke-dashoffset: 570;
                    }
                </style>
            </defs>
            <line id="s1" class="shape" x1="1.77" y1="1.77" x2="401.77" y2="401.77"/>
            <line id="s2" class="shape" x1="401.77" y1="1.77" x2="1.77" y2="401.77"/>
        </svg>

thanks to Helder Sepulveda