CODEWITHSUNDEEP
htmlcanvashtml5-canvas
Sujeesh S
Sujeesh S

Reputation: 196

Is it possible to fill an image within selected area inside canvas?

I have multiple polygon shapes,and the requirement is to fill images inside this drawn polygons. i have searched a lot on this,but only rectangle,curve,circles are shown in examples . But in my case all images have custom polygon shapes. an example is given below : ` 

     ctx.beginPath();
      ctx.lineTo(8, 109);
      ctx.lineTo(5, 109);
      ctx.lineTo(14, 112);
      ctx.lineTo(31, 119);
      ctx.lineTo(42, 129);
      ctx.lineTo(89, 150);
      ctx.lineTo(131, 140);
      ctx.lineTo(222, 199);
      ctx.lineTo(225, 238);
      ctx.lineTo(268, 270);
      ctx.lineTo(283, 253);
      ctx.lineTo(320, 275);
      ctx.lineTo(322, 298);
      ctx.lineTo(342, 332);
      ctx.lineTo(343, 354);
      ctx.lineTo(320, 392);
      ctx.lineTo(0, 393);
      ctx.lineTo(8, 109);
      ctx.stroke();
      ctx.closePath();
      ctx.lineWidth = 5;
      ctx.fillStyle = 'blue';
      // ctx.fill();
// ctx.drawImage(img);
// ctx.drawImage(img, 170,80,80,320,320,170);

Filling with color working perfectly,but instead i need to fill it with images. Is it possible ?

Upvotes: 1

Views: 48

Answers (1)

ForTW
ForTW

Reputation: 176

ctx.createPattern(); will set image inside the closed path

Upvotes: 1

Related Questions