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();

George John

Updated on: 25-Jun-2020

253 Views

Kickstart Your Career

Get certified by completing the course

Get Started