Каким образом правильно описать линию canvas, что бы можно было обратиться к ней после создания?
Например, узнать её размер, переместить, удалить, изменить размер.
Как понимаю это должен быть просто объект с свойствами, которые описал выше?
А после её создания, как к ней обращаться? Она будет экземпляром объекта или объектом?
Линия будет объектом canvas или объектом javascript?
Если линию загрузить в localStorage, как потом обрабатывать это для вывода на экран, это будет что-то типа цикла для каждого объекта в файле, и итерациями так выводить?
Или для этого уже нужны не просто функции, а какие-нибудь методы-фабрики и паттерны?
Например добавить var line1 = drawLine(ctx, 10, 10, 100, 100, 'tomato', 3);
<body>
<canvas id="canvas"> </canvas>
<script>
function drawLine(ctx, x1, y1, x2,y2, stroke = 'black', width = 3) {
// start a new path
ctx.beginPath();
// place the cursor from the point the line should be started
ctx.moveTo(x1, y1);
// draw a line from current cursor position to the provided x,y coordinate
ctx.lineTo(x2, y2);
// set strokecolor
ctx.strokeStyle = stroke;
// set lineWidht
ctx.lineWidth = width;
// add stroke to the line
ctx.stroke();
}
let canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
drawLine(ctx, 10, 10, 100, 100, 'tomato', 3);
</script>
</body>
Простой