настраиваемый курсор вне окна браузера

У меня есть элемент на моем веб-сайте, размер которого можно свободно изменять. Это делают 4 ручки по краям. При наведении указателя мыши на эти маркеры и изменении размера элемента я хочу показать соответствующие стрелки изменения размера.

В настоящее время я реализовал это поведение, установив стиль курсора css тела / корня на эти стрелки. Проблема заключается в ограничении клиентской области окна браузера. Было бы визуально более согласованным и менее запутанным, если бы курсор в виде стрелки был бы виден повсюду, пока мышь удерживается.

Карты Google делают то же самое с курсором в виде руки при перемещении карты. Итак, у меня вопрос, как добиться этого эффекта самостоятельно.

Мой текущий (соответствующий) источник:

function startObjectScaling(e){
    e.stopPropagation();
    e.preventDefault();
    document.documentElement.style.cursor = this.style.cursor;
    window.addEventListener("mouseup", stopObjectScaling, false);
}

function stopObjectScaling(e){
    e.stopPropagation();
    document.documentElement.style.cursor = '';
    window.removeEventListener("mouseup", stopObjectScaling);
}

[...]

var tg = document.getElementById("transformGadget");
var handle = tg.firstChild.nextSibling;
for(var i=0;i<4;i++){
    handle.addEventListener("mousedown", startObjectScaling, false);
    handle = handle.nextSibling;
}