Question

I have a <canvas> element that I put in a div using jQuery. The lines I draw on that canvas appear and then disappear very quickly.

When I put text inside the $('#solutionDiv') div, it appears when the page loads, and then gets covered (briefly) by my canvas, and then reappears when the canvas vanishes. This happens in FireFox and Chrome. I am using a library for sliders called tigra_slider_control. I don’t think that’s the issue, but it might be.

var solnCanvas=document.createElement('canvas'); // should be accessible through $('#solutionDiv > canvas')
solnCanvas.width = 480;
solnCanvas.height = 480;
var solnContext=solnCanvas.getContext('2d');
solnContext.strokeStyle = '#00f'; // blue lines
solnContext.lineWidth = 4;
solnContext.moveTo(50,16);
solnContext.lineTo(50,5);
solnContext.lineTo(5,5);
solnContext.stroke();
$('#solutionDiv').append(solnCanvas);

The corresponding div is:

    <div id="solutionDiv" style="width:580px;height:500px;" class="boxy">            
        Now you see it ... <br />
        Now you don't
    </div>

I don’t need (or want) text in this div. This is just for experimenting … Any help would be much appreciated.

Answer 1

So, here is my long-awaited answer to my own question. It seems to have had something to do with the fact that I was dynamically adding the div and the canvas. When I added the div and the canvas in the html at the very outset, the canvas stayed put. This is not exactly a solution — more of a workaround. Rather than adding the canvas later on, I just made it visible.