<canvas></canvas>
html,
body,
canvas {
  height: 100%;
  width: 100%;
  margin: 0;
  user-select: none;
}
let x, y, paint
const canvas = document.querySelector('canvas')
const context = canvas.getContext('2d')

function getCoordinates(event) {
  // check to see if mobile or desktop
  if (["mousedown", "mousemove"].includes(event.type)) {
    // click events 
    return [event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop]
  } else {
    // touch coordinates
    return [event.touches[0].pageX - canvas.offsetLeft, event.touches[0].pageY - canvas.offsetTop]
  }
}

function startPaint (e) {
  // change the old coordinates to the new ones
  paint = true
  let coordinates = getCoordinates(event)
  [x, y] = coordinates
}

canvas.addEventListener('mousedown', startPaint)
canvas.addEventListener('touchstart', startPaint)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.