El tema Canvas Draw Image en Firefox funciona bien en Chrome

Asumiré que esto es algún tipo de problema de compatibilidad. Todo funciona perfectamente en Chrome, pero en Firefox, simplemente no dibuja nada.

 function drawStage(stageNum) { var cap = canvasArray.length; //keeps the canvasElements var i; var stageImages = images["stage" + stageNum]; var stageDimensions = imageDimensions["stage" + stageNum]; //console.log("Cap is: " + cap); for (i = 0; i < cap; i++) { var canvas = document.getElementById(canvasArray[i]); var canvasContext = canvas.getContext("2d"); var image = document.getElementById(stageImages[i]); canvasContext.clearRect(0, 0, 1280, 1280); canvasContext.drawImage(image, stageDimensions[i][0], stageDimensions[i][1], stageDimensions[i][2], stageDimensions[i][3]); //document.getElementById(zIndexes[i][0]).style["z-index"] = zIndexes[i][stageNum]; //console.log(document.getElementById(zIndexes[i][0]).id); } } 

EDITAR: aquí está el enlace de Dropbox para la muestra de código “de prueba” que hice, mucho más simple, 1 imagen, 1 canvas, 1 div, un script similar (prácticamente igual), que aún no funciona en Firefox, pero funciona en Chrome. Si puedes resolver el problema allí, entonces esto también se resolverá.

ACTUALIZACIÓN: Las matrices se encuentran a continuación, por solicitud, son simples entradas de diferentes elementos / coordenadas. Sin embargo, les aseguro que no hay problemas dentro de los arreglos en sí mismos, todo funciona bien en Chrome. Algo sobre el método DrawImage () de la función está causando el problema que diría. (Explicación adicional debajo de las matrices)

images es una matriz (global) de identificadores para los elementos .

  var images = { stage1: ["character1Base", "character2Base", "character3Base", "character4Base", "character5Base", "character6Base", "character3BotImg"], stage2: ["character1Sit", "character2Base", "character3Base", "character4Base", "character5Base", "character6Base", "character3BotImg"], stage3: ["character1Sit", "character2Drink", "character3Base", "character4Base", "character5Base", "character6Base", "character3BotImg"], stage4: ["character1Sit", "character2Drink", "character3Base", "character4Base", "character5Base", "character6Doll", "character3BotImg"], stage5: ["character1Sit", "character2Drink", "character3Eat", "character4Base", "character5Base", "character6Doll", "character3EatBot"], stage6: ["character1Sit", "character2Stand", "character3Eat", "character4Base", "character5Base", "character6Doll", "character3EatBot"], stage7: ["character1Sit", "character2Stand", "character3Eat", "character4Sit", "character5Base", "character6Doll", "character3EatBot"], stage8: ["character1Sit", "character2Stand", "character3Eat", "character4Sit", "character5Sit", "character6Doll", "character3EatBot"], stage9: ["character1Sit", "character2Eat", "character3Eat", "character4Sit", "character5Sit", "character6Doll", "character3EatBot"], stage10: ["character1Drink", "character2Eat", "character3Eat", "character4Sit", "character5Sit", "character6Doll", "character3EatBot"] }; 

imageDimensions es una matriz (global) de pozo, dimensiones, posX, posY, tamañoX y tamañoY.

  var imageDimensions = { stage1: [[0, 0, 233, 485], [0, 0, 153, 407], [20, 0, 220, 200], [0, 150, 505, 210], [0, 0, 315, 391], [0, 0, 480, 435], [1, 0, 220, 180]], stage2: [[105, 35, 180, 440], [0, 0, 153, 407], [20, 0, 220, 200], [0, 150, 505, 210], [0, 0, 315, 391], [0, 0, 480, 435], [1, 0, 220, 180]], stage3: [[105, 35, 180, 440], [0, 0, 153, 407], [20, 0, 220, 200], [0, 150, 505, 210], [0, 0, 315, 391], [0, 0, 480, 435], [1, 0, 220, 180]], stage4: [[105, 35, 180, 440], [0, 0, 153, 407], [20, 0, 220, 200], [0, 150, 505, 210], [0, 0, 315, 391], [0, 0, 480, 435], [1, 0, 220, 180]], stage5: [[105, 35, 180, 440], [0, 0, 153, 407], [3, 7, 226, 180], [0, 150, 505, 210], [0, 0, 315, 391], [0, 0, 480, 435], [1, 9, 220, 180]], stage6: [[105, 35, 180, 440], [0, 0, 172, 490], [3, 7, 226, 180], [0, 150, 505, 210], [0, 0, 315, 391], [0, 0, 480, 435], [1, 9, 220, 180]], stage7: [[105, 35, 180, 440], [0, 0, 172, 490], [3, 7, 226, 180], [70, 0, 341, 380], [0, 0, 315, 391], [0, 0, 480, 435], [1, 9, 220, 180]], stage8: [[105, 35, 180, 440], [0, 0, 172, 490], [3, 7, 226, 180], [70, 0, 341, 380], [18, 72, 305, 422], [0, 0, 480, 435], [1, 9, 220, 180]], stage9: [[105, 35, 180, 440], [0, 0, 173, 473], [3, 7, 226, 180], [70, 0, 341, 380], [18, 72, 305, 422], [0, 0, 480, 435], [1, 9, 220, 180]], stage10: [[105, 32, 162, 440], [0, 0, 173, 473], [3, 7, 226, 180], [70, 0, 341, 380], [18, 72, 305, 422], [0, 0, 480, 435], [1, 9, 220, 180]] }; 

Explicación: la función está diseñada para dibujar en pantalla en diferentes elementos, caracteres que pertenecen a estos elementos. Se dibujan en canvas (luego se animarán también en canvas). El stageNum que es el único parámetro que toma la función, determina qué se dibujará.

¿Alguien sabe cuál es el problema? (He leído algunas publicaciones similares pero el problema en todas ellas era layerX, layerY de la posición del mouse, sin embargo, no estoy usando mouseover / mousein / mouseout aquí en absoluto, aún no se dibujan elementos.

Su problema es que la imagen que intenta dibujar son imágenes svg, y que estos documentos svg tienen atributos de width y height relativos.

El navegador no puede establecer una altura ni un ancho para la imagen que tiene que dibujar, y por lo tanto no puede renderizarla en el canvas. (Puede hacer una estimación en el documento, ya que puede ser relativo a algo, pero no en el canvas).

Así que la solución es establecer atributos de width y height absolutos en sus archivos svg,

O, más complicado, primero dibujarlo en un o un , luego dibujar una versión serializada donde habrás establecido estos atributos.

 function initialize() { var canvas = document.getElementById("char1Canvas"); var canvasContext = canvas.getContext("2d"); var image = document.getElementById("char1Img"); resizeSVG(image, function(e){ canvasContext.clearRect(0, 0, 1280, 1280); canvasContext.drawImage(this, 0, 0); }); }; var resizeSVG = function(svgImg, callback){ // create an iframe var iframe = document.createElement('iframe'); // so we don't see it iframe.height = 0; iframe.width = 0; iframe.onload = function(){ var doc = iframe.contentDocument; var svg = doc.querySelector('svg'); // get the computed width and height of your img element // should probably be tweaked var bbox = svgImg.getBoundingClientRect(); // if it's a relative width if (svg.width.baseVal.unitType !== 1) { svg.setAttribute('width', bbox.width); } // or a relative height if (svg.height.baseVal.unitType !== 1) { svg.setAttribute('height', bbox.height); } // serialize our updated svg var svgData = (new XMLSerializer()).serializeToString(svg); var svgURL = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgData); // create a new Image Object that ill be draw on the canvas var img = new Image(); img.onload = callback; img.src = svgURL; // remove the iframe document.body.removeChild(iframe); }; iframe.src = svgImg.src; document.body.appendChild(iframe); }