I'm trying to come up with a proof-of-concept on how to use canvas to create different length items (in this case a bike stem).
My idea is to provide 2 svgs (fragments) of the bike stem, then use a canvas line to connect them. I like this concept, but it feels very clunky and I'm unsure if this is sustainable. Ideally, I'd be able to extend this line, which would then extend the canvas, thus adjusting my drawn line.
document.addEventListener("DOMContentLoaded",() => {
const drawFragment = (imgsrc, xcord, ycord) => {
let img = newImage();
img.onload = () => {
ctx.drawImage(img, xcord, ycord);
}
img.src = imgsrc;
};
const drawConnector = (ctx, xstart, ystart, xend, yend,) => {
ctx.beginPath();
ctx.moveTo(xstart, ystart);
ctx.lineTo(xend, yend);
ctx.stroke();
};
const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
drawFragment('svgs/stem-fragment-01.svg, 0, 0);
drawFragment('svgs/stem-fragment-02.svg, 400, 0);
drawConnector(ctx, 209, 33, 400, 36);
drawConnector(ctx, 209, 169, 400, 159);
});
Which basically creates this (redlines are the drawn canvas elements)
Like I said, this feels very clunky and I'm wondering if i'm missing some out of the box canvas solution? The thought of mapping out the points one by one, seems like it will be more trouble than it's worth in the long run.
Here are the fragment svgs as well
Stem Fragment 1: https://pastebin.com/u0E4Nq6r
Stem Fragment 2: https://pastebin.com/71WTfS4y
