Menu
Is it possible to create html links out of text that is rendered in a canvas element?
425
First create two arrays for the x and y coordinates of your links on the canvas. Then test if a click was within a range of a link on a mouseup. It it was, use a window. open('http://myurl.com') method to open the link.
To add a link from one page to another, simply click another page's name within the page editor's Content Selector. (The same process can be used to link to other course content like quizzes, discussions, or modules.)
There is no easy way. You will have to draw the link text onto the canvas and then check for mouseclicks. Here is a demo html page:
<html> <head> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx; var linkText="https://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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
