How to make image fit in the edge? html5 canvas javascript

Question

http://i.stack.imgur.com/4oAYt.png

This is original when not insert image. it has blank image

http://i.stack.imgur.com/aupwr.png

i want to know how to make the image curve fit the edge (in red circle the image is fit in edge).

what the framework can do this?

• raphaeljs
• fabricjs
• kineticjs

Thank everyone for help me. sorry for bad english. Best Regard.

Answer 1

Around a square corner

You can use shearing transforms to give the illusion that a rectangular image is being shaped around corners. Shearing transforms are how you would put your rectangular logo image on a rectangular “3d” box. For “shearing” effects you can use any of the good libraries you mention…or even just use canvas itself. However , shearing effects give you sharp creased edge transforms rather than curved transforms. Here's an example: http://www.createjs.com/#!/EaselJS/demos/transform

Around a curved corner

But for truly curved transforms, you will need webGL or an image processing library that does perspective transforms.

Check out the server based ImageMagick tool and in particular look at the 3d Boxes, Perspective Layering section on this page: http://www.imagemagick.org/Usage/distorts/#methods

Quoting the imagemagick.org page:

This image was created by taking a [rectangular] image of a anime video box cover, splitting up that cover into 3 segments ('cover', 'spine', and 'back'), distorting each separately, into layered images. The image was then finished by the addition of highlights and shading effects (using HardLight image composition), and the addition of border and semi-transparent shadow effects (using CopyOpacity).

You can also do this in Photoshop--probably much easier ;)

• Bring your logo image and your phone case into Photoshop on separate layers.
• Use “Free Transform” to rotate your image to the same angle as the phone case.
• Use “Warp” in “Custom” mode to wrap the image around the phone case (the grid helps guide you).
• There's not much lighting in your phone case, but use “Blending” in the overlay mode to have your transformed image take on the highlights of the phone case.