Динамически нарисован элемент холста

Question

Я пытаюсь изучить некоторые новые вещи и подумал, что немного экспериментирую с холстом. У меня есть элемент холста, который загружает изображение, которое я хочу нарисовать, когда я нажму на якорь.

HTML

<a href="javascript:" id="testClick">Click Me</a> 
<canvas id="test" width=400 height=400></canvas> 

Javascript

var c = document.getElementById("test"); 
var ctx = c.getContext("2d"); 
var img = new Image(); 
img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
}; 
img.src = 'http://lorempixel.com/400/400/abstract'; 

$("#test").on('click', function() { 
    var c2 = document.getElementById('test').getContext('2d'); 
    c2.fillStyle = '#76ff03'; 
    c2.beginPath(); 
    c2.lineTo(100, 50); 
    c2.lineTo(50, 100); 
    c2.lineTo(0, 90); 
    c2.closePath(); 
    c2.fill(); 
}); 

Все его означало сделать, это нарисовать красный треугольник сверху изображение, которое ранее загруженную на холсте. К сожалению, я ничего не понимаю.

Любая помощь будет оценена по достоинству.

Answer 1

Очевидно, вы используете функцию «$», которую вы, вероятно, ожидаете от JQuery, но вы не включаете скрипт JQuery в свой файл.

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

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

Кстати, треугольник, который вы рисуете, на самом деле зеленый. Если вы хотите, чтобы он был красным, вы можете установить

c2.fillStyle = '# ff0000';