Кнопки, которые влияют на холст

Question

Я пытаюсь создать приложение простого рисования с холстом html5, и я использую this учебник в качестве моей базы. Я пытаюсь создать кнопку, которая удалит текущий выбранный элемент. Но я уверен, как создать кнопку с html, а затем дать кнопке доступ к функции CanvasState. В учебнике все функциональные возможности canvas (mousedown, mouse up, selection и т. Д.) Добавлены чем-то вроде CanvasState.prototype.getMouse = function(e) Итак, как я могу добавить кнопку в HTML <button onClick="delete()">Delete</button> и удалить функцию delete() от CanvasState или по крайней мере, имеют доступ к своим переменным экземпляра?

Answer 1

Вот как я решил это. Создать кнопку

<button id="delete">Delete</button> 

Получить доступ к кнопке в Javascript

this.delete_button = document.getElementById('delete'); 

Таким образом, мы не перепутать контекст, когда у нас есть функции в функциях:

myState = this; 

Грязная работа

myState.delete_button.onclick = function() { 
     if(myState.selected_index != -1){   
     myState.shapes.splice(myState.selected_index, 1); 
     myState.selected_index = -1; 
     myState.selection = null; 
     myState.valid = false; 
     } 
    } 

Answer 2

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