Нарисуйте точку на изображении, используя jQuery

У меня есть следующий код для отслеживания того, где пользователь нажимает на изображение:

 <img src="images/test.jpg" id="testimg" />

    <script type="text/javascript">
        $("#testimg").click(function (ev) {
            mouseX = ev.pageX;
            mouseY = ev.pageY
            alert(mouseX + ' ' + mouseY);
        })

    </script>

Что бы я хотел сделать, когда пользователь нажимает на изображение, я хочу нарисовать точку в координатах X, Y клика.

Может кто-нибудь дать мне несколько советов о том, как это можно сделать?

Ответ 1

<script type="text/javascript">
        $("#testimg").click(function (ev) {
        mouseX = ev.pageX;
        mouseY = ev.pageY
        //alert(mouseX + ' ' + mouseY);
        var color = '#000000';
        var size = '1px';
        $("body").append(
            $('<div></div>')
                .css('position', 'absolute')
                .css('top', mouseY + 'px')
                .css('left', mouseX + 'px')
                .css('width', size)
                .css('height', size)
                .css('background-color', color)
        );
    })
</script>

Это будет рисовать черный 1x1 пиксель div.

Ответ 2

Способ 1.

Вам нужно использовать тег canvas. https://developer.mozilla.org/en/Canvas_tutorial

Способ 2.

<div style="width:1px; height : 1px; position: fixed; top: mouseY; left:mouseX></div>

Работает только в том случае, если страница не прокручивается