Question

I have probably a quite easy question:
I created a canvas on my HTML page and did some painting stuff on it.
Now I want to put a normal p-Text object over this canvas.
However, when I do insert a new p-Element using the x|y mouse coordinates canvas.onmousemove(e) gives me and the position:absolute setting, my painting on the canvas gets “lost”. The canvas element becomes white.

Also the canvas does not react on clicks anymore so that I am not able to continue painting.
For me it seems that javascript crashed, but neither Firebug nor the firefox error-console display any errors.

Answer 1

I’m not sure I known what you need to do.
I have a live demo where is canvas on which are painted rectangles and I bound a listener to click event. When you click on canvas new HTMLParagraphElement is created in place on current mouse position. Demo is available on: http://jsfiddle.net/wDpFk/

Assume, Paragraph position is defined in css as absolute and of course the color attribute should be differently than either black or red 🙂

Ok. Draw something on canvas

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

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

And now:

//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 );
};

Or with jQuery:

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

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

})