望んでいることは出来ないんじゃないか?……と思って調べてみました。
本家SOの方に同じ質問をしている方がいたのでリンクしておきます。
要するに実現している内容はclickable mapと同じです。
キャンバスの上に動いているマウスの座標を取得して、
指定座標内でクリックされたら遷移するものです。
WEB以外の表示でリンクしたい……は出来ません。
結局、出力は画像なので、出力する画像フォーマットにリンクの機能がないとリンクは出来ないです。
<html>
<head>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx;
var linkText = "http://stackoverflow.com";
var linkX = 5;
var linkY = 15;
var linkHeight = 10;
var linkWidth;
var inLink = false;
// draw the balls on the canvas
function draw() {
canvas = document.getElementById("myCanvas");
// check if supported
if (canvas.getContext) {
ctx = canvas.getContext("2d");
//clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
//draw the link
ctx.font = '10px sans-serif';
ctx.fillStyle = "#0000ff";
ctx.fillText(linkText, linkX, linkY);
linkWidth = ctx.measureText(linkText).width;
//add mouse listeners
canvas.addEventListener("mousemove", on_mousemove, false);
canvas.addEventListener("click", on_click, false);
}
}
//check if the mouse is over the link and change cursor style
function on_mousemove(ev) {
var x, y;
// Get the mouse position relative to the canvas element.
if (ev.layerX || ev.layerX == 0) { //for firefox
x = ev.layerX;
y = ev.layerY;
}
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
//is the mouse over the link?
if (x >= linkX && x <= (linkX + linkWidth) && y <= linkY && y >= (linkY - linkHeight)) {
document.body.style.cursor = "pointer";
inLink = true;
}
else {
document.body.style.cursor = "";
inLink = false;
}
}
//if the link has been clicked, go to link
function on_click(e) {
if (inLink) {
window.location = linkText;
}
}
</script>
</head>
<body onload="draw()">
<center>
<canvas id="myCanvas" width="200" height="200" style="border-style:solid;border-width:1px">Canvas not supported.</canvas>
</center>
</body>
</html>