How to use the canvas element to take advantage of accelerated graphics

Question

I have html page and I use a generic handler to get a byte array for my img control.

I have recently moved to using the canvas element.

I have got an image loaded into my canvas after I have loaded it into a hidden img variable.

I want to refresh/change this image as quickly as I can.

I have read that canvas takes advantage of hardware accelerated graphics.

is this handled automatically by the canvas element? Do i need to add any additional code?

Do I need specific graphics card or is it down to the graphics driver installed?

This is my code so far:

I call a generic handler ashx page that returns

context.Response.BinaryWrite(data);

This loads an image into an Image variable

var myIMG= new Image();

And when it has hit the onload event of that image variable it draws onto the canvas:

    var c1 = document.getElementById("live1x4");
    var ctx1 = c1.getContext("2d");
    c1.setAttribute('width', '360');
    c1.setAttribute('height', '288');
    img1x4.onload = function () {
        ctx1.drawImage(img1x4, 0, 0);
    };
    img1x4.onerror = function () {
        $("#divMode5").html('error#1');
    };