// To double check location of touches or other x,y coordinates
function debugDot(x, y, element = document.body)
{
    var dotSize = 10;
    var dot = document.getElementById("debugDot");
    if (!dot) {
        dot = document.createElement("div");
        dot.id = "debugDot";
    }
    
    dot.style.pointerEvents = "none";
    
    dot.style.position = "absolute";
    dot.style.height = dotSize + "px";
    dot.style.width = dotSize + "px";
    dot.style.backgroundColor = "DeepPink";
    dot.style.borderRadius = "100%";
    dot.style.left = (x - dotSize/2)+"px";
    dot.style.top = (y - dotSize/2)+"px";
    
    element.appendChild(dot);
}

function removeDebugDot()
{
    var dot = document.getElementById("debugDot");
    if (dot.parentNode)
        dot.parentNode.removeChild(dot);
}

// To double check location of word boxes or other x,y coordinates
function debugRect(x, y, width, height, element = document.body)
{
    var rect = document.getElementById("debugRect");
    if (!rect) {
        rect = document.createElement("div");
        rect.id = "debugRect";
    }
    
    rect.style.pointerEvents = "none";
    
    rect.style.position = "absolute";
    rect.style.height = height + "px";
    rect.style.width = width + "px";
    rect.style.backgroundColor = "rgba(255,0,255,0.5)";
    rect.style.top = y + "px";
    rect.style.left = x + "px";
    
    element.appendChild(rect);
}

function removeDebugRect()
{
    var rect = document.getElementById("debugRect");
    if (rect.parentNode)
        rect.parentNode.removeChild(rect);
}