Невозможно отобразить что-либо через Canvas

Question

Я пытаюсь создать библиотеку подсветки с JavaScript и jQuery. На этой неделе я просто погружаюсь в техники Canvasing и не считаю их сложными. Однако, работая сегодня, мой код просто перестает работать. Я знаю, что, вероятно, я просто пропустил что-то очевидное, но вот уже почти 2 часа я застрял вот так, и мне нужно снова начать этот проект. любая помощь будет принята с благодарностью.

$(function() { 
    $('area').click(function(event) { 
    event.preventDefault(); 
    document.getElementById("ctx").getContext("2d").fillStyle = "#FF0000"; 
    document.getElementById("ctx").getContext("2d").fillRect(0, 0, 200, 200); 
    }); 
}); 

Я включил мой Javascript только потому, что это единственное, что я изменил недавно.

Answer 1

Вашего код работает для меня, если предположить:

• страницы имеет интерактивные area.
• На этой странице есть холст с № ctx.

Убедитесь, что эти 2 вещи истинны о вашей установке ...

ли ваш холст элемент имеет #ID из ctx? Это не смертельно, но элемент canvas содержит context, поэтому он немного вводит в заблуждение.

Если у вас есть брезентовый элемент вроде этого:

<canvas id=canvas></canvas> 

Тогда вы можете получить многоразовую ссылку на контекст холста, как это:

// no need to constantly get a context reference ... 
//  just do it once at the start of your app 
var canvas=document.getElementById('canvas'); 
var context=canvas.getContext('2d'); 

И вы можете использовать эту контекстную ссылку, чтобы сделать все ваши призывы к обращению:

context.fillStyle='red'; 
context.fillRect(0,0,200,200);