Рисовалка JavaScript, функция штампа

Question

подскажите пожалуйста. В рисовалке есть кнопка с выбором режима Штамп/Рисовать. Когда нажимаешь "Штамп" на кнопке отображается "Рисовать" и наоборот. И вот вопрос... Как задать кнопке "Штамп" функцию штампа, чтобы изображение солнца вставлялось туда, куда тыкнул по канвасу? И как должен выглядеть код в этом случае? Заранее, большое спасибо!

Вот код

const btn = document.getElementById('jsClear');
const mode = document.getElementById('jsMode');
const canvas = document.getElementById('jsCanvas');
const colors = document.getElementsByClassName('jsColor');
const ctx = canvas.getContext('2d');
const range = document.getElementById('jsRange');
let img = new Image();
img.src = "kotik.jpg";
window.addEventListener('load', function() {
  ctx.drawImage(img, 0, 0, 667, 667);
});

let painting = false;
let filling = false;

canvas.height = 667;
canvas.width = 667;

ctx.lineWidth = 8;
ctx.lineCap = "round";
ctx.strokeStyle = '#0c0c0c';

function onClear() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(img, 0, 0, 667, 667);
}

function handleColorClick(event) {
  const color = event.target.style.backgroundColor;
  ctx.strokeStyle = color;
}

function handleRangeChange(event) {
  const rangeValue = event.target.value;
  ctx.lineWidth = rangeValue;
}

function handleModeClick() {
  if (painting === true) {
    painting = false;
    mode.innerText = 'Рисовать';
  } else {
    painting = true;
    mode.innerText = 'Штамп';
  }
}

function drawIfPressed(e) {
  var x = e.offsetX;
  var y = e.offsetY;
  var dx = e.movementX;
  var dy = e.movementY;

  if (e.buttons > 0) {
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x - dx, y - dy);
    ctx.stroke();
    ctx.closePath();
  }
}

canvas.addEventListener('mousemove', drawIfPressed);
btn.addEventListener('click', onClear);

Array.from(colors).forEach(color => color.addEventListener('click', handleColorClick));

if (range) {
  range.addEventListener('input', handleRangeChange);
}

if (mode) {
  mode.addEventListener('click', handleModeClick);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>www</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <canvas id="jsCanvas" class="canvas"></canvas>
  </div>
  <div class="controls">
    <div class="controls__range">
      <input type="range" id="jsRange" min="1.0" max="16.0" value="8.0" step="1.0">
    </div>
    <div class="controls__btns">
      <button id="jsMode">Рисовать</button>
      <button id="jsClear">Очистить</button>
      <button id="jsSave">Сохранить</button>
    </div>
    <div class="controls__colors" id="jsColors">
      <div class="controls__color jsColor" style="background-color:#0c0c0c"></div>
      <div class="controls__color jsColor" style="background-color:rgb(87, 87, 87)"></div>
      <div class="controls__color jsColor" style="background-color:white"></div>
      <div class="controls__color jsColor" style="background-color:red"></div>
      <div class="controls__color jsColor" style="background-color:orangered"></div>
      <div class="controls__color jsColor" style="background-color:yellow"></div>
      <div class="controls__color jsColor" style="background-color:green"></div>
      <div class="controls__color jsColor" style="background-color:rgb(0, 162, 232)"></div>
      <div class="controls__color jsColor" style="background-color:blue"></div>
      <div class="controls__color jsColor" style="background-color:purple"></div>
      <div class="controls__color jsColor" style="background-color:rgb(0, 255, 0)"></div>
      <div class="controls__color jsColor" style="background-color:fuchsia"></div>
    </div>
  </div>
  <script src="app.js"></script>
</body>

</html>

вот картинка, которая должна быть штампом

БЛОГ НА HUSL

Рисовалка JavaScript, функция штампа

Ответы (0 шт):