Javascript canvas not displaying in Firefox

Question

I've run into this problem on a few occasions but I can't seem to find a solid answer or solution to the problem.

I created a site that uses two canvases layered on top of each other which display properly in Chrome, but in Firefox only one of the canvases will display. Here's my code:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">

var interval;
    var width, height;

// ------------- SETUP ----------------------    
    window.onload = function() {
        width = document.width;
        height = document.height;
    setupC1();
        setupC2();
}

function setupC1(){
    canvas1 = document.createElement("canvas");
    canvas1.width = document.width;
    canvas1.height = document.height;
        canvas1.style.position = "absolute";
        canvas1.style.top = "0px";
        canvas1.style.left = "0px";
        canvas1.style.zIndex = "-2";
    document.body.appendChild(canvas1);
    ctx = canvas1.getContext("2d");
        interval = setInterval(draw, 50);
}

    function setupC2(){
    canvas2 = document.createElement("canvas");
    canvas2.width = "399";
    canvas2.height = "274";
        canvas2.style.position = "absolute";
        canvas2.style.top = (window.innerHeight/2)-100 +"px";
        canvas2.style.left = (window.innerWidth/2)-200 +"px";
        canvas2.style.zIndex = "-1";
    document.body.appendChild(canvas2);
    ctx2 = canvas2.getContext("2d");
        interval = setInterval(gun, 50);
}


// ------------- DRAW ----------------------     
    function draw() {

    var x = Math.round(Math.random()*window.innerWidth);
    var y = Math.round(Math.random()*window.innerHeight);
    function rndColor() {
        return '#' + ('00000' + (Math.random() * 16777216 << 0).toString(16)).substr(-6);
    }
    //draw here

        ctx.strokeStyle=rndColor();

        ctx.beginPath();
        ctx.moveTo(window.innerWidth/2, window.innerHeight/2);
        ctx.lineTo(x, y);
        ctx.closePath();
        ctx.stroke();            

    }

function gun(){
    ctx2.fillStyle="#000000";
        ctx2.strokeStyle="#000000";
        ctx2.beginPath();
        ctx2.moveTo(51, 28);
        ctx2.lineTo(66, 28);
        ctx2.lineTo(71, 19);
        ctx2.lineTo(75, 19);
        ctx2.lineTo(77, 28);
        ctx2.lineTo(191, 28);
        ctx2.lineTo(191, 30);
        ctx2.lineTo(238, 30);
        ctx2.lineTo(238, 28);
        ctx2.lineTo(350, 28);
        ctx2.lineTo(355, 23);
        ctx2.lineTo(358, 28);
        ctx2.lineTo(368, 28);
        ctx2.lineTo(368, 36);
        ctx2.lineTo(373, 36);
        ctx2.lineTo(374, 59);
        ctx2.lineTo(368, 59);
        ctx2.lineTo(368, 69);
        ctx2.lineTo(371, 69);
        ctx2.lineTo(371, 77);
        ctx2.lineTo(368, 80);
        ctx2.lineTo(368, 95);
        ctx2.lineTo(265, 102);
        ctx2.lineTo(265, 153);
        ctx2.lineTo(164, 153);
        ctx2.lineTo(169, 141);
        ctx2.lineTo(249, 141);
        ctx2.lineTo(249, 103);
        ctx2.lineTo(198, 106);
        ctx2.bezierCurveTo(192, 106, 195, 135, 200, 137);
        ctx2.lineTo(194, 139);
        ctx2.bezierCurveTo(190, 136, 178, 108, 180, 106);
        ctx2.lineTo(169, 143);
        ctx2.lineTo(156, 156);
        ctx2.lineTo(157, 176);
        ctx2.lineTo(143, 190);
        ctx2.lineTo(144, 208);
        ctx2.lineTo(129, 222);
        ctx2.lineTo(129, 242);
        ctx2.lineTo(120, 242);
        ctx2.lineTo(120, 255);
        ctx2.lineTo(42, 246);
        ctx2.lineTo(48, 233);
        ctx2.lineTo(37, 231);
        ctx2.lineTo(25, 220);
        ctx2.lineTo(75, 113);
        ctx2.bezierCurveTo(75, 90, 55, 85, 46, 83);
        ctx2.closePath();
        ctx2.fill();
        ctx2.stroke();
}
</script>
</head>

<body>
</body>
</html>

I feel like I may have heard about potential firefox issues with using negative z-indexes, could that really be the problem?

Boris Zbarsky · Accepted Answer · 2013-04-14 03:06:54Z

2

There are no width or height properties on the document object in the specs, so document.width ends up as undefined, and so does document.height. So you're setting your canvas1 to have a width and height of 0, which is the number undefined converts to.

You may want to use one of the things listed at https://developer.mozilla.org/en-US/docs/DOM/document.width#Alternatives and https://developer.mozilla.org/en-US/docs/DOM/document.height#Alternatives

answered Apr 14, 2013 at 3:06

Boris Zbarsky

35.2k5 gold badges55 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript canvas not displaying in Firefox

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related