텍스트가 "캔버스"를 파괴합니까?

Question

나는 아마도 매우 쉬운 질문을 가지고있다 : 나는 나의 HTML 페이지에 캔버스를 만들고 거기에 그림을 그렸다. 이제 정상적인 p-Text 개체를이 캔버스에 배치하려고합니다. 그러나, x | y 마우스 좌표를 사용하여 새로운 p-Element를 삽입 할 때 canvas.onmousemove (e)가 나와 절대 위치를 지정하면 캔버스의 그림이 "손실"됩니다. 캔버스 요소가 흰색이됩니다.

캔버스가 더 이상 클릭에 반응하지 않아 페인팅을 계속할 수 없습니다. 나를 위해 javascript가 충돌 한 것 같지만 Firebug 나 firefox error-console은 오류를 표시하지 않습니다.

Answer 1

내가해야 할 일을 잘 모르겠다. 캔버스에 사각형을 칠한 라이브 데모가 있으며 이벤트를 클릭하기 위해 수신기를 연결합니다. 캔버스를 클릭하면 현재 HTML 위치에 새 HTMLParagraphElement가 만들어집니다. http://jsfiddle.net/wDpFk/

가 가정 단락 위치는 절대 CSS에 정의 물론 컬러 특성 검정 또는 적색 중 다르게되어야 :)

확인 : 데모에 사용할 수있다. 이제 캔버스

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"); 

})