<canvas>繪圖損壞的Firefox手機，華爲MediaPad 10，Android 4.1.2

Question

我面對的是一個奇怪的問題與Android和HTML5畫布的Firefox。

我有一個允許客戶簽名的表單。這個表單可以很好地工作在chrome（屏幕截圖1）上，但是當客戶試圖在Firefox上登錄android時，該表單將很難實現。

的簽名板JS代碼是從http://www.zetakey.com/codesample-signature.php

JS代碼如下：

// JavaScript Document 

function signatureCapture() { 

    //Actual Code starts here 

    var parent=document.getElementById("canvas"); 
    parent.childNodes[0].nodeValue = ""; 

    var canvasArea=document.createElement("canvas"); 
    canvasArea.setAttribute("id", "newSignature"); 
    parent.appendChild(canvasArea); 

    var canvas = document.getElementById("newSignature"); 
    var context = canvas.getContext("2d"); 

    if (!context) { 
     throw new Error("Failed to get canvas' 2d context"); 
    } 

    screenwidth = screen.width; 

    //if (screenwidth < 480){ 
    // canvas.width = screenwidth - 8 ; 
    // canvas.height = (screenwidth * 0.63) ; 
    //} 
    //else { 
     canvas.width = 460 ; 
     canvas.height = 300 ; 
    //} 

    context.fillStyle = "#fff"; 
    context.strokeStyle = "#444"; 
    context.lineWidth = 1.2; 
    context.lineCap = "round"; 

    context.fillRect(0, 0, canvas.width, canvas.height); 

    context.fillStyle = "#3a87ad"; 
    context.strokeStyle = "#3a87ad"; 
    context.lineWidth = 1; 
    context.moveTo((canvas.width*0.042),(canvas.height * 0.7)); 
    context.lineTo((canvas.width*0.958),(canvas.height * 0.7)); 
    context.stroke(); 

    context.fillStyle = "#fff"; 
    context.strokeStyle = "#444"; 


    var disableSave = true; 
    var pixels = []; 
    var cpixels = []; 
    var xyLast = {}; 
    var xyAddLast = {}; 
    var calculate = false; 

    //functions 
    { 
     function remove_event_listeners() { 
      canvas.removeEventListener('mousemove', on_mousemove, false); 
      canvas.removeEventListener('mouseup', on_mouseup, false); 
      canvas.removeEventListener('touchmove', on_mousemove, false); 
      canvas.removeEventListener('touchend', on_mouseup, false); 

      document.body.removeEventListener('mouseup', on_mouseup, false); 
      document.body.removeEventListener('touchend', on_mouseup, false); 
     } 

     function get_board_coords(e) { 
      var x, y; 

      if (e.changedTouches && e.changedTouches[0]) { 
       var offsety = canvas.offsetTop || 0; 
       var offsetx = canvas.offsetLeft || 0; 

       x = e.changedTouches[0].pageX - offsetx; 
       y = e.changedTouches[0].pageY - offsety; 
      } else if (e.layerX || 0 == e.layerX) { 
       x = e.layerX; 
       y = e.layerY; 
      } else if (e.offsetX || 0 == e.offsetX) { 
       x = e.offsetX; 
       y = e.offsetY; 
      } 

      return { 
       x : x, 
       y : y 
      }; 
     }; 

     function on_mousedown(e) { 
      e.preventDefault(); 
      e.stopPropagation(); 

      canvas.addEventListener('mousemove', on_mousemove, false); 
      canvas.addEventListener('mouseup', on_mouseup, false); 
      canvas.addEventListener('touchmove', on_mousemove, false); 
      canvas.addEventListener('touchend', on_mouseup, false); 

      document.body.addEventListener('mouseup', on_mouseup, false); 
      document.body.addEventListener('touchend', on_mouseup, false); 

      empty = false; 
      var xy = get_board_coords(e); 
      context.beginPath(); 
      pixels.push('moveStart'); 
      context.moveTo(xy.x, xy.y); 
      pixels.push(xy.x, xy.y); 
      xyLast = xy; 
     }; 

     function on_mousemove(e, finish) { 
      e.preventDefault(); 
      e.stopPropagation(); 

      var xy = get_board_coords(e); 
      var xyAdd = { 
       x : (xyLast.x + xy.x)/2, 
       y : (xyLast.y + xy.y)/2 
      }; 

      if (calculate) { 
       var xLast = (xyAddLast.x + xyLast.x + xyAdd.x)/3; 
       var yLast = (xyAddLast.y + xyLast.y + xyAdd.y)/3; 
       pixels.push(xLast, yLast); 
      } else { 
       calculate = true; 
      } 

      context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y); 
      pixels.push(xyAdd.x, xyAdd.y); 
      context.stroke(); 
      context.beginPath(); 
      context.moveTo(xyAdd.x, xyAdd.y); 
      xyAddLast = xyAdd; 
      xyLast = xy; 

     }; 

     function on_mouseup(e) { 
      remove_event_listeners(); 
      disableSave = false; 
      context.stroke(); 
      pixels.push('e'); 
      calculate = false; 
     }; 

    }//end 

    canvas.addEventListener('mousedown', on_mousedown, false); 
    canvas.addEventListener('touchstart', on_mousedown, false); 
} 

function signatureSave() { 

    var canvas = document.getElementById("newSignature"); 
    // save canvas image as data url (png format by default) 
    var dataURL = canvas.toDataURL("image/png"); 
    document.getElementById("saveSignature").src = dataURL; 


}; 
function signaturePost() { 
    var canvas = document.getElementById("newSignature"); 
    // save canvas image as data url (png format by default) 
    document.getElementById('postSignature').value = canvas.toDataURL('image/png'); 
    document.forms["submit_signature"].submit() 

} 

/* 
Reload page instead of this function: 

function signatureClear() { 


    var parent=document.getElementById("canvas"); 
    var child=document.getElementById("newSignature"); 
    parent.removeChild(child); 

    signatureCapture(); 


} 
*/ 

// http://stackoverflow.com/questions/11385471/save-canvas-image-post-the-data-string-to-php 


function signatureSend() { 
    var canvas = document.getElementById("newSignature"); 
    var dataURL = canvas.toDataURL("image/png"); 
    document.getElementById("saveSignature").src = dataURL; 
    var sendemail = document.getElementById('sendemail').value; 
    var replyemail = document.getElementById('replyemail').value; 

var form = document.createElement("form"); 
form.setAttribute("action","upload_file.php"); 
form.setAttribute("enctype","multipart/form-data"); 
form.setAttribute("method","POST"); 
form.setAttribute("target","_self"); 
form.innerHTML = '<input type="text" name="image" value="'+dataURL+'"/>'+'<input type="email" name="email" value="'+sendemail+'"/>'+'<input type="email" name="replyemail" value="'+replyemail+'"/>'; 
form.submit(); 
} 

我已經實現的代碼，它很好地工作在Chrome

但它在Firefox中爭奪

我在華爲媒體板10上使用firefox 29.0.1運行android 4.1.2

有什麼想法？

更新：這裏是顯示在工作時整個代碼小提琴：基於圖像中的僞像 http://jsfiddle.net/3KHAf/

Answer 1

，我懷疑這是一個錯誤的設備顯卡驅動程序代碼，並在其上的Firefox步驟。移動世界毫無新聞。或者它也可能是Firefox本身的bug，但我覺得這個選項更不可能。

我建議以下步驟

• 檢查可以重複問題上的其他Android設備

• 隔離代碼造成圖形的文物到jsfiddle.net測試用例，你只有有源代碼行觸發了問題。分享他人的鏈接以測試問題。

• 報告針對Firefox移動https://bugzilla.mozilla.org/

如果錯誤是Mozilla的一邊，它是可重複的錯誤，他們通常讓這些固定的相當快。

在irc.mozilla.org上有#mobile頻道，您可以在此尋求進一步幫助。