HTML画布上的JS Paintbrush颜色不起作用

Question

我正在尝试使用html画布在Javascript中构建一个基本的绘图程序，但是我在使用firefox中运行代码时更改画笔颜色时遇到了问题（它在Chrome中运行正常）。下面是我的html，css和javascript。如果你能告诉我如何在firefox中改变颜色，那将会有很大的帮助。

HTML：

    <div id="controls">

        <div id="tools" class="container">
            <div id="tool-images">
                <img id="pencil" src="Images/tools/pencil.png">
                <img id="eraser" src="Images/tools/eraser.png">
                <img id="paintBucket" src="Images/tools/paintBucket.png">
                <img id="hand" src="Images/tools/hand.png">
            </div>
            <p class="name">Tools</p>
        </div>

        <div id="tool-size" class="container">
            <p><label>Size:</label>
            <input type="number" id="tool-size-input" value="12" min="0"></p>
            <p class="name">Tool size</p>
        </div>

        <div id="color" class="container">
            <input type="color">
            <p class="name">Color</p>
        </div>

        <div id="u/d" class="container">
            <p><input type="button" id="saveButton" value="Save"></p>
            <p><input type="button" id="uploadButton" value="Upload"></p>
            <p class="name">File</p>
        </div>

        <div id="layers" class="container">
            <p><input type="button" id="new-layer" value="New"></p>
            <p><input type="button" id="remove-layer" value="Remove"></p>
            <p class="name">Layers</p>
        </div>

<div id="selection" class="container">
            <p>

            <input type="number" id="select-layer" value="0" min="0" max="0"></p>
        </div>

        <div id="layerThumbNails">
        </div>

        <div class="clear"></div>
    </div>

    <div id="canvases">
        <canvas id="front-canvas" width="500" height="500"></canvas>
        <div id="insert"></div>
        <canvas id="back-canvas" width="500" height="500"></canvas>
        <canvas id="compCan" width="500" height="500"></canvas>
    </div>

CSS：

   body {
    margin:0;
    padding:0;
    background-color: #D2DBE9;
    user-select: none;
height: 90%;
}

.clear{
    clear:both;
}

/*------------Controls-------------*/

#controls, #properties{
    color: #663977;
    height:100px;
    background-color: #DCE6F4;
    border-bottom: 2px solid #C5CFDF;
}

.container{
    float:left;
    position:relative;
    margin:10px 0 0 20px;
    height:80px;
    width:100px;
    border-right:1px solid #A5B8D0;
}

#layerThumbNails{
    float:left;
    position:relative;
    margin:10px 0 0 20px;
    height:80px;
}

.thumbNail {
    width:70px;
    height:70px;
    margin:5px 20px 5px 0;
    z-index:10;
    background-color:white;
}

input[type="button"], input[type="file"]{
    width:86px;
}

input[type="number"]{
    width:40px;
    position:absolute;
    right:10px;
}

input[type="color"]{
    widows:50px;
    height:40px;
    margin:10px 0 0 12px;
}

#controls .name{
    position:absolute;
    bottom:-20px;
    width:80px;
    text-align:center;
    right:20px;
    font:12px Arial;
    color:#9883A9;
}

#tool-images img{
    box-sizing:border-box;
    width:25px;
    margin:1px;
}

#tool-images img:hover, .tool-active {
    cursor:pointer;
    border:1px solid blue;
}

/*------------canvases----------------*/

#canvases{
    position:relative;
    margin:5px 0 0 5px;
}

#canvases:hover{
    cursor:pointer;
}

#back-canvas{
    position:absolute;
    left:0;
    background-color:white;
}

#front-canvas{
    position:absolute;
    left:0;
}

#compCan{
    position:absolute;
    left:0;
}

/*-------------properties--------------*/

#properties{
    position:fixed;
    right:5px;
    width:130px;
    height:150px;
    padding:0 10px 0 10px;
    display:none;
}

#properties input[type="number"]{
    margin-right:5px;
    width:60px;
}

#properties-title{
    text-align:center;
}

#invert{
    width:120px;
}

和JavaScript：

var canvasFront = document.getElementById('front-canvas'),
    canvasBack = document.getElementById('back-canvas'),
    ctx = [];

var comp = document.getElementById('compCan'),
    ctxComp = comp.getContext('2d'),
    saveBtn = document.getElementById('saveButton'),
    uploadBtn = document.getElementById('uploadButton');

var canvasArr = [],
    canvasArrThumbNails = [],
    ctxThumbNails = [],
    newLayer = document.getElementById('new-layer'),
    removeLayer = document.getElementById('remove-layer'),
    layerSelector = document.getElementById('select-layer'),
    layerSelect = 0;

var canvasPosition;

var mouseX, mouseY, mouseXDown, mouseYDown, cX, cY,
    mouseXl = document.getElementById('mouseX'),
    mouseYl = document.getElementById('mouseY');

var tools = [];

tools.pencil = document.getElementById('pencil');
tools.eraser = document.getElementById('eraser');
tools.bucket = document.getElementById('paintBucket');
tools.hand = document.getElementById('hand');

var toolSize = document.getElementById('tool-size-input'),
    activeColor;

var eraserCursor = "url(images/cursor/small_eraser.png), pointer",
    pencilCursor = "url(images/cursor/pencil.png), pointer";

/*var canvasClear = document.getElementById('clear-canvas'),
    fileImg = document.getElementById('img-file'),
    properties = document.getElementById('properties'),
    imgWidth = document.getElementById('img-width'),
    imgHeight = document.getElementById('img-height');*/

/*var startX = 100, startY = 100;*/

window.onload = function() {
    canvasPosition = canvasBack.getBoundingClientRect();
}

canvasFront.onmousemove = function(e) {
    mouseX = e.clientX - canvasPosition.left;
    mouseY = e.clientY - canvasPosition.top;
    /*mouseXl.innerHTML = mouseX;
    mouseYl.innerHTML = mouseY;*/
}


/*------------tools selection-------------*/

addAllHandlers(tools, "tool-active");

function addAllHandlers(arr, className){
    for (var item in arr) {
        arr[item].onmousedown = addHandler(arr[item], arr, className);
    }
}

function addHandler(element, arr, className) {
    return function() {
        removeAllClasses(arr);
        element.setAttribute("class", className);
    }
}

function removeAllClasses(arr) {
    for (var item in arr) {
        arr[item].removeAttribute("class");
    }
}


/*----------save-----------------*/

saveBtn.onclick = function() {
    ctxComp.clearRect(0,0,comp.width, comp.height);
    for (var item in canvasArr){
        ctxComp.drawImage(canvasArr[item], canvasArr[item].offsetLeft, canvasArr[item].offsetTop);
    }
}

uploadBtn.onclick = function() {

    alert("yay");
}

/*----------layers---------------*/

layerSelector.onchange = function() {
    layerSelect = layerSelector.value-1;
}

/*canvasArrThumbNails[].onmouseover = function() {
    window.alert("");
}//rtghjdfhjghfg*/

newLayer.onclick = function() {
    canvasArr.push("layer" + canvasArr.length);
    canvasArrThumbNails.push("layer" + canvasArrThumbNails.length);
    selectorRefresh();

    canvasArr[layerSelect] = document.createElement("canvas");
    canvasArr[layerSelect].style.position = "absolute";
    canvasArr[layerSelect].width = 500;
    canvasArr[layerSelect].height = 500;
    canvasArr[layerSelect].style.background = "none";
    canvasArr[layerSelect].style.zIndex = canvasArr.length+1;

    canvasArrThumbNails[layerSelect] = document.createElement("canvas");
    canvasArrThumbNails[layerSelect].className = "thumbNail";
    document.getElementById('layerThumbNails').appendChild(canvasArrThumbNails[layerSelect]);

    canvasFront.style.zIndex = canvasArr.length+2;
    document.getElementById('insert').appendChild(canvasArr[layerSelect]);

    ctx[layerSelect] = canvasArr[layerSelect].getContext('2d');
    ctxThumbNails[layerSelect] = canvasArrThumbNails[layerSelect].getContext('2d');
    ctxThumbNails[layerSelect].scale(0.6,0.3);

    ctx[layerSelect].strokeRect(0, 0, 500, 500);
    ctx[layerSelect].strokeText(layerSelect + 1, 5, 12);
}

removeLayer.onclick = function() {
    document.getElementById('insert').removeChild(canvasArr[layerSelect]);
    canvasArr.splice(layerSelect, 1);
    ctx.splice(layerSelect, 1);
    canvasFront.style.zIndex = canvasArr.length+2;

    document.getElementById('layerThumbNails').removeChild(canvasArrThumbNails[layerSelect]);
    canvasArrThumbNails.splice(layerSelect, 1);
    ctxThumbNails.splice(layerSelect, 1);
    cleanArray(canvasArrThumbNails);
    cleanArray(canvasArr);
    cleanArray(ctx);
    cleanArray(ctxThumbNails);

    selectorRefresh();
}

function selectorRefresh() {
    layerSelect = canvasArr.length-1;
    layerSelector.value = canvasArr.length;
    layerSelector.max = layerSelect+1;
}

function cleanArray(actual){
    var newArray = [];
    for (var i = 0; i < actual.length; i++){
        if (actual[i]){
            newArray.push(actual[i]);
        }
    }
    return newArray;
}

/*------------paint---------------*/

var processing = false;
var operations = [];

canvasFront.onmouseover = function(){
    if (tools.eraser.active){
        this.style.cursor = "url(images/cursor/small_eraser.png), pointer";
    }
    else if (tools.pencil.active){
        this.style.cursor = "url(images/cursor/pencil.png), pointer";
    }
    else if (tools.hand.active){
        this.style.cursor = "url(images/cursor/hand.png), pointer";
    }
    else { this.style.cursor = auto;}
}

operations['mousedown'] = function() {
    processing = true;
    ctx[layerSelect].beginPath();
    mouseXDown = mouseX;
    mouseYDown = mouseY;
    cX = canvasArr[layerSelect].offsetLeft;
    cY = canvasArr[layerSelect].offsetTop;
};
operations['mouseup'] = function() {
    processing = false;

    thumbNailUpdate();
};
operations['mouseout'] = function(){
    processing = false;

    thumbNailUpdate();
};

canvasFront.addEventListener("mousedown", function() {operations["mousedown"]()});

canvasFront.addEventListener("mouseup", function() {operations["mouseup"]()});

canvasFront.addEventListener("mousemove", function() {operations["mousemove"]()});

canvasFront.addEventListener("mouseout", function() {operations["mouseout"]()});

tools.pencil.onclick = function() {
    for (var item in tools){
        tools[item].active = false;
    }
    tools.pencil.active = true;
    operations['mousemove'] = function() {
        if (processing){
            fillCircle(mouseX - cX, mouseY - cY, toolSize.value);
        };
    };
};

tools.eraser.onclick = function() {
    for (var item in tools){
        tools[item].active = false;
    }
    tools.eraser.active = true;
    operations['mousemove'] = function() {
        if (processing){
            clearCircle(mouseX - cX, mouseY - cY, toolSize.value);
        };
    };
};

tools.hand.onclick = function() {
    for (var item in tools){
        tools[item].active = false;
    }
    tools.hand.active = true;
    operations['mousemove'] = function() {
        moveCanvas();
    };
};

function thumbNailUpdate(){
    ctxThumbNails[layerSelect].clearRect(0,0,70, 70);
    ctxThumbNails[layerSelect].drawImage(canvasArr[layerSelect],0,0);
}

function moveCanvas() {
    if (processing){
        canvasArr[layerSelect].style.left = mouseX + cX - mouseXDown + "px";
        canvasArr[layerSelect].style.top = mouseY + cY - mouseYDown + "px";
    }
}


function fillCircle(x, y, radius) {
    ctx[layerSelect].fillStyle = activeColor;
    ctx[layerSelect].beginPath();
    ctx[layerSelect].arc(x, y, radius, 0, 2*Math.PI, false);
    ctx[layerSelect].fill();
}

function clearCircle(x, y, radius) {
    ctx[layerSelect].save();
    ctx[layerSelect].globalCompositeOperation = 'destination-out';
    ctx[layerSelect].beginPath();
    ctx[layerSelect].arc(x, y, radius, 0, 2*Math.PI, false);
    ctx[layerSelect].fill();
    ctx[layerSelect].restore();
}

color.onchange = function(e) {
    activeColor = e.srcElement.value;
}

同样，任何可以提供的帮助都会很棒！谢谢！