Текст "разрушает" холст?

Question

У меня, наверное, довольно простой вопрос: я создал холст на своей HTML-странице и нарисовал на нем некоторые элементы рисования.Теперь я хочу поместить обычный объект p-Text поверх этого холста.Однако, когда я вставляю новый p-элемент, используя координаты мыши x | y, canvas.onmousemove (e) дает мне и положение: абсолютное значение, моя картина на холсте «теряется».Элемент canvas становится белым.

Также холст больше не реагирует на нажатия, поэтому я не могу продолжать рисовать.Мне кажется, что javascript потерпел крах, но ни Firebug, ни консоль ошибок firefox не отображают никаких ошибок.

Answer 1

Я не уверен, что знаю, что тебе нужно делать. У меня есть живая демонстрация, где находится холст, на котором нарисованы прямоугольники, и я привязал слушателя к событию щелчка. При нажатии на холст новый HTMLParagraphElement создается на месте в текущей позиции мыши. Демо доступно на: http://jsfiddle.net/wDpFk/

Предположим, позиция абзаца определена в css как абсолютная, и, конечно, атрибут цвета должен отличаться от черного или красного :)

Ok. Нарисуйте что-нибудь на холсте

var c = document.getElementById("c"),
    ctx = c.getContext( "2d" );

ctx.fillRect( 0, 0, 100, 100 );
ctx.fillStyle = "red";
ctx.fillRect( 22, 25, 25, 25 );

А теперь:

//without jquery
c.onclick = function( event ) {
  var e = window.event || event,
      p =document.createElement( "p" );

  p.innerHTML = "text";
  p.style.left = e.clientX + "px";
  p.style.top = e.clientY + "px";
  document.body.appendChild( p );
};

Или с помощью jQuery:

 $( c ).click( function( e ) {

    $( "<p>text</p>" ).css({
       left: e.pageX,
       top: e.pageY
    }).appendTo( "body" );

})