CODEWITHSUNDEEP
javascriptfirefoxhtml5-canvas
qwentl
qwentl

Reputation: 55

Javascript canvas not displaying in Firefox

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?

Upvotes: 0

Views: 3597

Answers (1)

Boris Zbarsky
Boris Zbarsky

Reputation: 35074

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

Upvotes: 2

Related Questions