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

Published on 06-Apr-2018 14:18:08

• Related Questions & Answers
• Play video on canvas and preserve the last frame/image on HTML5 Canvas
• Load image from url and draw to HTML5 Canvas
• Change colour of an image drawn on an HTML5 canvas element.
• HTML5 Canvas Font Size Based on Canvas Size
• addEventListener for keydown on HTML5 Canvas
• Update HTML5 canvas rectangle on hover
• Draw part of an image inside HTML5 canvas
• HTML5 Canvas layer disappears on mouse click in Fabric.js and Firefox stops responding when creating a canvas for the image?
• HTML5 drawImage() method to draw image onto the canvas
• World Map on HTML5 Canvas or SVG
• How to detect point on canvas after canvas rotation in HTML5
• What is composition in HTML5 Canvas?
• What is getContext in HTML5 Canvas?
• What is the difference between SVG and HTML5 Canvas?
• How to draw a rectangle on HTML5 Canvas?