Question

Say I have the canvas tag in my HTML5 document

<canvas id="fooBar" width="500" height="200"></canvas>

And I also have an empty anchor tag

<a href="" id="spin">Spin</a>

and I build my canvas in the head

var fooCanvas = document.getElementById("fooBar");
var barContext = fooCanvas.getContext("2d");

Is there a way I can add:

barContext.fillText("fubar", x,y);

Dynamically via clicking on the anchor tag? What I want is to have a variable in my JS which doesn’t always hold the same value, and clicking the a tag would update the canvas fillText attribute every time the link is clicked, My idea to overcome this is to use jQuery and have something like this:

    $(document).ready(function(){
        $("a").click(function(event){
            // Something here
        });
    }); 

Obviously this would work on every a tag I have in the document so I’ll specify that later on but I’m not too sure on the syntax required to append that canvas attribute to my canvas? Any ideas?

Answer 1

Yes:

var fooCanvas = document.getElementById("fooBar");
var barContext = fooCanvas.getContext("2d");

$(document).ready(function(){
    $("a").click(function(event){
        barContext.fillText("fubar", x,y);
    });
});

Although you might want to use button elements instead of a, since they’re not actually links.