0
\$\begingroup\$

How could I draw a texture between the bottom of the canvas and below the green line, in javascript? I dynamically add coordinates in a canvas, then draw lines between these points.

EDIT : Solution: so I had to do it like this :

let path = 'M'+points[i-1].x+' '+points[i-1].y;
path += 'L'+points[i].x+' '+points[i].y;
//etc... with "Z" for closing the path, then :
let p = new Path2D(path);
ctx.fillStyle = ctx.createPattern(imgTexture, "repeat");
ctx.fill(p);

enter image description here

enter image description here

\$\endgroup\$
4
  • \$\begingroup\$ Are you looking for How to fill an area with a bitmap? \$\endgroup\$
    – DMGregory
    Commented Jan 29, 2022 at 23:03
  • \$\begingroup\$ @DMGregory if I use drawImage, I have to repeat the whole image, and I'm not sure how to make a nice transition between 2 images side by side. Also, with the curve lines, there are many segments to simulate the curve. I saw a method using triangles but it is with software like libGdx I think. \$\endgroup\$
    – Leo_xfh
    Commented Jan 30, 2022 at 8:26
  • \$\begingroup\$ You should probably consider looking at the answers at the link above that don't use DrawImage then. 😉 You can use an image patterned fill as part of the regular Canvas API, no special tricks or other software required. \$\endgroup\$
    – DMGregory
    Commented Jan 30, 2022 at 10:19
  • \$\begingroup\$ @DMGregory great thank you very much \$\endgroup\$
    – Leo_xfh
    Commented Jan 30, 2022 at 13:12

1 Answer 1

1
\$\begingroup\$

Solution: so I had to do it like this :

let path = 'M'+points[i-1].x+' '+points[i-1].y;
path += 'L'+points[i].x+' '+points[i].y;
//etc... with "Z" for closing the path, then :
let p = new Path2D(path);
ctx.fillStyle = ctx.createPattern(imgTexture, "repeat");
ctx.fill(p);
\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .