Taking notes on a webpage on an iPad

Issue

I am currently working on my code and am wondering how can I create a box where an iPad user can take notes in the box with their finger/pen. I thought I saw it somewhere somwehre and tried to implement it but it doesnt work and cannot find the webpage I saw it from.

I am trying to google and using various help from different webpages. The expected result should be, that I can use my finger to draw on this webpage or a pen and take notes.

let painting = false;

const canvas = document.getElementById('signatureCanvas');
const ctx = canvas.getContext('2d');

function startPosition(e) {
  painting = true;
  draw(e);
}

function finishedPosition() {
  painting = false;
  ctx.beginPath();
}

function draw(e) {
  if (!painting) return;
  ctx.lineWidth = 2;
  ctx.lineCap = 'round';

  // Adjust for touch events
  let clientX = e.clientX || e.touches[0].clientX;
  let clientY = e.clientY || e.touches[0].clientY;

  ctx.lineTo(clientX - canvas.offsetLeft, clientY - canvas.offsetTop);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(clientX - canvas.offsetLeft, clientY - canvas.offsetTop);
}

function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

canvas.addEventListener('mousedown', startPosition);
canvas.addEventListener('mouseup', finishedPosition);
canvas.addEventListener('mousemove', draw);

// Touch event listeners
canvas.addEventListener('touchstart', startPosition);
canvas.addEventListener('touchend', finishedPosition);
canvas.addEventListener('touchmove', draw);

.canvas-container {
  border: 1px solid #ccc;
  width: 100%;
}

<div class="container">
  <div class="row form-section centered-content" style="background-color:lavender;">
    <div class="col-md-12">
      <div class="canvas-container">
        <canvas id="signatureCanvas" width="300" height="150"></canvas>
      </div>
      <button type="button" class="btn btn-secondary mt-2" onclick="clearCanvas()">Notiz löschen</button>
    </div>
  </div>
</div>

Solution

Adjustments:

• Event Handling
• Canvas Sizing
• High DPI Display

Enhanced version of your Code:

let painting = false;

const canvas = document.getElementById('signatureCanvas');
const ctx = canvas.getContext('2d');

// Adjust canvas for high DPI displays
function adjustCanvas() {
  const ratio = window.devicePixelRatio || 1;
  const width = canvas.offsetWidth * ratio;
  const height = canvas.offsetHeight * ratio;
  canvas.width = width;
  canvas.height = height;
  canvas.style.width = `${canvas.offsetWidth}px`;
  canvas.style.height = `${canvas.offsetHeight}px`;
  ctx.scale(ratio, ratio);
}
adjustCanvas();
window.onresize = adjustCanvas;

function startPosition(e) {
  // Prevents scrolling
  e.preventDefault();
  painting = true;
  draw(e);
}

function finishedPosition() {
  painting = false;
  ctx.beginPath();
}

function draw(e) {
  if (!painting) return;
  ctx.lineWidth = 2;
  ctx.lineCap = 'round';

  let clientX = e.clientX || e.touches[0].clientX;
  let clientY = e.clientY || e.touches[0].clientY;

  ctx.lineTo(clientX - canvas.getBoundingClientRect().left, clientY - canvas.getBoundingClientRect().top);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(clientX - canvas.getBoundingClientRect().left, clientY - canvas.getBoundingClientRect().top);
}

function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

canvas.addEventListener('mousedown', startPosition);
canvas.addEventListener('mouseup', finishedPosition);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('touchstart', startPosition);
canvas.addEventListener('touchend', finishedPosition);
canvas.addEventListener('touchmove', draw);

.canvas-container {
  border: 1px solid #ccc;
  width: 100%;
  height: 300px;
  /* Adjust this as needed */
}

<div class="container">
  <div class="row form-section centered-content" style="background-color:lavender;">
    <div class="col-md-12">
      <div class="canvas-container">
        <canvas id="signatureCanvas"></canvas>
      </div>
      <button type="button" class="btn btn-secondary mt-2" onclick="clearCanvas()">Notiz löschen</button>
    </div>
  </div>
</div>

Answered By - AztecCodes