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

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');
    };

Solution

Html5 Canvas automatically uses any existing GPU to accelerate graphics when it can.

Just be sure you have the latest browser installed (some old browsers don't use the GPU).

If you're just drawing an offscreen img element to the canvas, that's GPU accelerated.

context.drawImage(myImageElement,0,0);

I see that you're using a byte array for something. Therefore I should mention that .getImageData and .putImageData don't use the GPU for acceleration.