Как добавить функцию стирания в приложение для рисования?

Мне нужен совет о том, как добавить новую функцию в мой модуль приложения для рисования, а именно стирание. Я новичок в JS, поэтому надеюсь, что кто-то посоветует мне.

Ниже я прикрепляю js-код модуля приложения для рисования, который у меня есть:

function _(selector){
    return document.querySelector(selector);
  }
  function setup(){
    let canvas = createCanvas(644, 594);
    canvas.parent("canvas-wrapper");
    background(255);
  }
  function mouseDragged(){
    let type = _("#pen-pencil").checked?"pencil":"brush";
    let size = parseInt(_("#pen-size").value);
    let color = _("#pen-color").value;
    fill(color);
    stroke(color);
    if (type == "pencil"){
      line(pmouseX, pmouseY, mouseX, mouseY);
    } else {
      ellipse(mouseX, mouseY, size, size);
    }
  }
  _("#reset-canvas").addEventListener("click", function(){
    background(255);
  });
  _("#save-canvas").addEventListener("click",function(){
    saveCanvas(canvas, "screen", "png");
  });

HTML-код приложения для рисования:

<div class = "app">
        <div class = "controls">
          <div class = "type">
            <input type = "radio" name = "pen-type" id = "pen-pencil" checked>
            <label for = "pen-pencil">
                <i class = "bi bi-pencil"></i>
            </label>
            <input type = "radio" name = "pen-type" id = "pen-brush">
            <label for = "pen-brush">
                <i class = "bi bi-brush"></i></i>
            </label>
          </div>
          <div class = "size">
            <label for = "pen-size">Hrubost</label>
            <input type = "range" id = "pen-size" min = "1" max = "50">
          </div>
          <div class = "color">
            <label for = "pen-color">Barva</label>
            <input type = "color" id = "pen-color" value = "#000">
          </div>
          <div class = "actions">
            <button id = "reset-canvas">Vymazat</button>
            <button id = "save-canvas">Uložit</button>
          </div>
        </div>
        <div id = "canvas-wrapper"></div>
        </div>
      </div>

Вы можете найти это приложение, которое у меня есть здесь, на моей странице - litecode.net

Спасибо за помощь.

Не могли бы вы сделать рабочий фрагмент - см. [Ссылка] stackoverflow.com/help/minimal-reproducible-example, в котором показан этот код плюс любой код для реализации стирания, который вы пробовали до сих пор, и опишите, что с этим не работает.

A Haworth 30.03.2021 13:59

@Haworth Мне нужно было бы добавить новую функцию стирания, например ластик, в мое приложение для рисования, я не знаю, как еще это написать, но мне нужна помощь с этим.

Jakub Mitrega 30.03.2021 14:43
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
35
0

Другие вопросы по теме