DOM'a Tuval Öğesi Ekleme

Question

appendChild bir tuvali çağırmak ve MS Paint gibi bir program yapmak için burada çalışıyorum ve burada fareyle yalnızca 'çizim' yapmaya çalışıyorum.

Bunun için yalnızca 500x500 olacak şekilde yüksekliğini/genişliğini değiştirmeyi denedim ve div içinde de aramam gereken bir div arasında görünmeye çalıştım.

Bunun neden düzgün çalışmadığını anlayamıyorum.

Birisi yardım edebilir mi?

var canvas = document.getElementById('canvas'); 
document.body.appendChild(canvas); 

var ctx = canvas.getContext('2d'); 
document.body.style.margin = 0; 
canvas.style.position = 'fixed'; 
resize(); 

var pos = { x: 0, y: 0 }; 

canvas.addEventListener('resize', resize); 
canvas.addEventListener('mousemove', draw); 
canvas.addEventListener('mousedown', setPosition); 
canvas.addEventListener('mouseenter', setPosition); 

//what would be the new positions from the "mouse" event. 

function setPosition(e) 
{ 
    pos.x = e.clientX; 
    pos.y = e.clientY; 
} 

function resize() 
{ 
    ctx.canvas.width = window.innerWidth; 
    ctx.canvas.height = window.innerHeight; 
} 

function draw(e) 
{ 
    if (e.buttons! ==1) return; 

    ctx.beginPath(); 
    ctx.lineWidth = 5; 
    ctx.lineCap = 'round'; 
    ctx.strokeStyle = 'red'; 

    ctx.moveTo(pos.x, pos.y); 
    setPosition(e); 
    ctx.lineTo(pos.x, pos.y); 

    ctx.stroke(); 
} 

Answer 1

Bunu kullanmayı deneyin. Mevcut bir elemanı seçmek için kullanılır. Yeni bir tane oluşturmuyor.