Question

I have been playing about with canvas, but have stumbled across a problem. When reading up on canvas I found a few different ways to declare the canvas and it’s context, both seemed to work until I tried implementing a simple frame buffer.

function drawToCanvas(){
    var buffer = $("#myBuffer");    
    var canvas = $("#myCanvas");
    var bufferContext = buffer.get(0).getContext("2d");
    var context = canvas.get(0).getContext("2d");

    //var buffer = document.getElementById("myBuffer"); 
    //var canvas = document.getElementById("myCanvas");
    //var bufferContext = buffer.getContext("2d");
    //var context = canvas.getContext("2d");

    bufferContext.fillRect(100,100,100,100);
    context.drawImage(buffer, 0, 0);
}

If I use the commented out lines to draw the buffer image to the context it works perfectly. However if I use the above lines the drawImage() function gives a typeError. This was confusing me considering I was able to use the JQuery selector method fine, it was just the drawImage() function failing me.

Any advice would be really appreciated.

Answer 1

When using the jquery selectors, the buffer parameter used in drawImage is the jquery object, i guess. You should probably change it to buffer.get(0) ? I’ve never used jquery myself, but that’s what I infer from the rest of your code.