Home/ Questions/Q 7770839
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T16:30:20+00:00

Is it possible to spread an image inside html5 canvas.. like say I have

  • 0

Is it possible to spread an image inside html5 canvas..
like say I have 2,3 shapes..like a rectangle a circle and some squares and some random un proportional shape..
and I have a list of images..they are textures not exactly colors just textures and If I click on one I want it to spread inside any shape(transform itself accordingly without distorting the finish)
probably by mapping co-ordinates and then spreading the image or multiplying it..
Is there any way to do so??
inside html5 canvas of course
it’s a little tough to explain but if anyone has any idea about this then some pointers would be nice..

Regards,
Ashish

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First, you have to save the coordinates of your shapes and hit test your mouse clicks to find matches.

    To fill a shape with an image, use the createPattern function with parameter ‘repeat’. Define the fillstyle property to your pattern, and fill according to the coordinates of your shape.

    Links that can be helpful :

    http://www.tutorialspoint.com/html5/canvas_pattern_shadow.htm

    http://simonsarris.com/blog/140-canvas-moving-selectable-shapes

    • 0