Я пытаюсь использовать appendChild
здесь, чтобы вызвать холст и сделать такую программу, как MS Paint, и здесь я пытаюсь просто «рисовать» с помощью мыши.Добавление элемента Canvas в DOM
Я попытался изменить высоту/ширину этого только 500x500 и появиться между div, которые мне нужно вызвать тоже в div.
Я не могу понять, почему это работает неправильно.
Может кто-нибудь помочь?
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();
}