Ein Canvas Element an DOM anhängen

Question

Ich versuche hier appendChild zu verwenden, um eine Leinwand aufzurufen und ein Programm wie MS Paint zu machen und hier versuche ich einfach mit meiner Maus zu 'zeichnen'.

Ich habe versucht, die Höhe/Breite von diesem zu ändern, nur 500x500 zu sein und zwischen einem div zu erscheinen, das ich auch in einem div nennen muss.

Ich kann nicht zu verstehen scheinen, warum das nicht richtig funktioniert.

Kann mir bitte jemand helfen?

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

Versuchen Sie wie folgt.

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

document.getElementById('idName') wird verwendet, um ein vorhandenes Element auszuwählen. Es wird kein neues erstellt.