Добавить атрибуты холста динамически?

Question

Скажем, у меня есть тег canvas в моем документе HTML5

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

И у меня также есть пустой тег привязки

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

, и я строю свой холст в голове

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

Есть ли способ добавить:

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

Динамически, нажав на тег привязки?Я хочу, чтобы в моем JS была переменная, которая не всегда содержала бы одно и то же значение, и нажатие на тег обновляло бы атрибут canvas fillText при каждом нажатии на ссылку. Моя идея преодолеть это - использовать jQuery и иметьчто-то вроде этого:

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

Очевидно, это будет работать для каждого тега, который есть в документе, поэтому я укажу это позже, но я не слишком уверен в синтаксисе, необходимом для добавления этого атрибута canvasна мой холст?Есть идеи?

Answer 1

Да:

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

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

Хотя вы, возможно, захотите использовать button элементы вместо a, поскольку они на самом деле не являются ссылками.