Computer >> Computer tutorials >  >> Programming >> Javascript

Is HTML5 canvas and image on polygon possible?


Yes, it is possible. Create a pattern using the image, and then set the pattern to fillStyle.

Here, obj is our image object −

var context = canvas.getContext("2d");
var pattern = context.createPattern(obj, "repeat");
context.fillStyle = pattern;

You need to manipulate the image to fit an arbitrary polygon −

context.save();
context.setTransform(m11, m12, m21, m22, dx, dy);
context.drawImage(obj);
context.restore();