1

I have create a canvas to render a svg after it has been manipulated via a form. Simple things like adding text to certain areas.

It works perfect in all browsers bar Firefox. I have checked and all the code seem to be supported via FireFox and the code does function except the canvas never shows anything.

Here is the code used to draw to the canvas.


function createTie_Base() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  const svgContainer = document.getElementById('hiddenSVG_Base');
  const svgElm = document.getElementById('Layer_1');
  console.log(svgElm)
  let cloneSvgElm = svgElm.cloneNode(true);
  let blob = new Blob([cloneSvgElm.outerHTML], {
  type: 'image/svg+xml;charset=UTF-8',
  });
  let URL = window.URL || window.webkitURL || window;
  let blobURL = URL.createObjectURL(blob);
  let svgImg = new Image();
  svgImg.src = blobURL;
  svgImg.onload = () => {
      if(productType === "scarf"){
         let half = canvas.width / 2
         let quarter = half / 2
         console.log(half,quarter)
         ctx.drawImage(svgImg, quarter, 0, half, canvas.height);
     }else{
         ctx.drawImage(svgImg, 0, 0, canvas.width, canvas.height);
     }

    if (inputText[0].checked) {
        addText_Handler();
    } else {
        createTie_Shadow()
    }
  };
}

Has anyone else experienced this and have a work around or can see a problem why it doesn't work on FireFox?

I have check that Firefox supports the code being used, With no error codes I am unsure on how to debug this issue.

Andrew Mason
  • 11
  • 2
  • Why are there backslashes all over the JS code? – Teemu Nov 25 '22 at 11:56
  • Sorry for some reason copy and pasting my code added them. – Andrew Mason Nov 25 '22 at 12:00
  • Have you checked whether the `load` event works? Have you tried appending the `image` to the page and see if anything is rendered in there or if there's an error on your SVG rendering in firefox? – somethinghere Nov 25 '22 at 12:15
  • This appears to be a bug in Firefox, see https://stackoverflow.com/a/28692538/1169519 I've played with your code, and setting `width` and `height` for the `svg` element [seems to work](https://jsfiddle.net/7dq3mjgp/1/). – Teemu Nov 25 '22 at 12:54
  • Just a thought: Have you tried setting the image source after setting the onload event? If the image is available synchronously then maybe Firefox directly loads it so the onload event is not triggered because it was set to late. – kayahr Nov 26 '22 at 17:17
  • @teemu, adding width and height attributes to the SVG solved the problem thank you – Andrew Mason Dec 02 '22 at 15:59

0 Answers0