Tengo un polígono creado y que se dibuja en el canvas, este se ve así:
La cosa es que, si en este polígono quiero meter una imagen sin que se desborde (Es decir que vaya de acuerdo a la forma del polígono), como le podría hacer con una imagen??, ya que lo que hago para dibujar el polígono es simplemente hacer uso de las funciónes
ctx.beginPath,
ctx.closePath,
ctx.stroke,
ctx.fill
Las cuales permiten dibujar lineas y conectarlas para crear una forma, hay manera de usar esta forma ya creada para poner dentro una imagen que quepa en el poligono? (No importa si los lados de la imagen son recortados).
Por ejemplo supongamos que en un triangulo quiero dibujar una imagen sin que esta pase los limites del triangulo:
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.save();
ctx.fillStyle = "#000";
ctx.beginPath();
ctx.moveTo(40,100);
ctx.lineTo(80,20);
ctx.lineTo(120,100);
ctx.closePath();
ctx.stroke();
ctx.restore();
<canvas id = "canvas" width = "400" height = "400"></canvas>
Como haría yo entonces en este triangulo como ejemplo, dibujar una imagen cualquiera que quepa en los limites del triangulo (De momento sin escalarse), es decir con el tamaño de la imagen original, y que esta no pase los limites del triangulo?
(si consigo ver como hacerlo con un triangulo, podré hacerlo con el polígono).
NOTA: las lineas de separación horizontales y verticales del poligono original son hechas aparte del poligono, el polígono como tal es este mismo pero sin las lineas.