What is the best way of turning a Canvas element into a link - by this I mean the whole canvas element, not just a part of the image.

I have tried the obvious thing - wrapping the element in an A element - but finding issues in IE9.

Take this markup for example:

<a href="#link">
  <canvas width="100" height="100">
    //fallback
  </canvas>
</a>

Using CSS I have styled the link background colour to change on hover, and am finding in most modern canvas supporting browsers it works as expected - you hover, the background changes colour, you click the link, the link is followed.

However, in IE9 when hovering over the element it doesn't recognise that it's a link - no hover effect, no cursor changing to a pointer, clicking does nowt.

Interestingly, if I add a 1 pixel border to the A element, and hover the mouse precariously over the 1 pixel border, IE9 does recognise the link, and after that you can move the mouse over the canvas and it maintains it's hover state and works as a link.

It's almost as if the canvas is overriding the link, so the browser isn't able to recognise the link, only the canvas element - if that makes sense?

So, really I just want to ascertain:

• Is is acceptable to simply wrap a Canvas element in an A element - is this just IE9 being weird or am I doing it wrong?
• If I'm doing it wrong, what is the accepted technique for doing this seemingly simple task?

Thanks

UPDATE

OK, so the answer's I've had below are all correct, but unfortunately weren't working in my implementation either. My markup is quite a lot more plicated than the simplified example above, so I'm guessing that actually there is something else at play that is causing the problem - with native hover events and events attached with JavaScript - nothing was working.

However, I've e up with a hack that solved the problem. I gave my link an RGBA background colour with zero opacity. Once that was there, things work fine. Weird I know, but fixed :)

What is the best way of turning a Canvas element into a link - by this I mean the whole canvas element, not just a part of the image.

I have tried the obvious thing - wrapping the element in an A element - but finding issues in IE9.

Take this markup for example:

<a href="#link">
  <canvas width="100" height="100">
    //fallback
  </canvas>
</a>

Using CSS I have styled the link background colour to change on hover, and am finding in most modern canvas supporting browsers it works as expected - you hover, the background changes colour, you click the link, the link is followed.

However, in IE9 when hovering over the element it doesn't recognise that it's a link - no hover effect, no cursor changing to a pointer, clicking does nowt.

Interestingly, if I add a 1 pixel border to the A element, and hover the mouse precariously over the 1 pixel border, IE9 does recognise the link, and after that you can move the mouse over the canvas and it maintains it's hover state and works as a link.

It's almost as if the canvas is overriding the link, so the browser isn't able to recognise the link, only the canvas element - if that makes sense?

So, really I just want to ascertain:

• Is is acceptable to simply wrap a Canvas element in an A element - is this just IE9 being weird or am I doing it wrong?
• If I'm doing it wrong, what is the accepted technique for doing this seemingly simple task?

Thanks

UPDATE

OK, so the answer's I've had below are all correct, but unfortunately weren't working in my implementation either. My markup is quite a lot more plicated than the simplified example above, so I'm guessing that actually there is something else at play that is causing the problem - with native hover events and events attached with JavaScript - nothing was working.

However, I've e up with a hack that solved the problem. I gave my link an RGBA background colour with zero opacity. Once that was there, things work fine. Weird I know, but fixed :)

• javascript
• html
• canvas

• Am guessing here, hence the ment... but the canvas will be painted over the anchor element and so the canvas element is capturing all of the events. Quite why it's not being passed to the anchor, i'm not sure... but maybe you could play around with the z-index styling of these elements? – Dancrumb Commented Dec 16, 2010 at 19:01

4 Answers 4

I'm not 100% on the problems with the canvas element in IE but you can update the onclick handler of the canvas element, changing the window location to where you want.

document.getElementById("mycanvas").onclick = function(e){
    window.location.href = 'http://www.google.';
};

Example: http://jsfiddle/jonathon/HtmVS/

You could handle other events (like the mousein/mouseout) to set the cursor, if you wanted.

You can use javascript's onclick to handle this, and bine it with CSS to put a cursor: pointer; on it. You could then implement canvas:hover in CSS for the hover effects. You can bine this with an <a> to allow the user to "tab" through the links/canvases.

Not sure if you wanted to use jQuery, but if so, try this.

$("#myCanvasId").click(function(){
window.open("https://www.google.");
});

Cross-browser way to do this is simply by putting a div on top of the canvas that has the exact same pixel position and width and height as the canvas. Then install on click handler on that div and the use window.location.href as suggested in the earlier answer.

...
<canvas id=".. >
<div id="overlay"/>
...