<div class="container"></div>
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
}

.box {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
}
let innerHtml = "";

function insertEle() {
  $(this).html(innerHtml);
}

$(".container").on("touchstart", function(e) {
  innerHtml = `<div class="box" style="top: ${e.touches[0].clientY -
    10}px;left: ${e.touches[0].clientX - 10}px"></div>`;
  insertEle.call(this);
});

$(".container").on("touchmove", function(e) {
  innerHtml = `<div class="box" style="top: ${e.touches[0].clientY -
    10}px;left: ${e.touches[0].clientX - 10}px"></div>`;
  insertEle.call(this);
});

$(".container").on("touchend", function(e) {
  innerHtml = "";
  insertEle.call(this);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js