is there any way that you can stretch an image between few given points on the canvas (similar to Transform). When I use Transform , I can definitely stretch it, however it is not giving all the options that I need for what I have in mind. For example, if I am to do a game that should generate objects , such as boxes, I want to make sure that depending on where the player is located, to turn the image on the side of the boxes and transform them as if you are moving around them. In transform, I can do that, however it will always keep the same height on both sides of the image (left and right) while I need to have more control to decrease the height on the right side of the image only (per say). Much appreciated if you can give a hint on how to do that without using any library.
Here is an example on what I have so far (though again the second image on the right still keeps the same height on the it's far right side same as the one on it's left side):
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reshape images</title>
</head>
<body style="margin:10px;">
<canvas id="canvas" style="background:#000;"></canvas>
<script type="text/javascript">
// INITIAL SETUP
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
var innerWidth = 1000,
innerHeight = 650;
canvas.width = innerWidth;
canvas.height = innerHeight;
var img = new Image;
img.onload = function() {
var tile1 = [
{x: 10, y: 10}, // upper left corner
{x: 210, y: 50}, // upper right
{x: 230, y: 150}, // bottom right
{x: 30, y: 110} // bottom left
],
tile2 = [
{x: 210, y: 50},
{x: 410, y: 5},
{x: 430, y: 105},
{x: 230, y: 150}
];
renderTile(this, tile1);
renderTile(this, tile2);
function renderTile(img, tile) {
var dx, dy, a1, a2, w, h, i = 1;
// calc horizontal angle
dx = tile[1].x - tile[0].x; // horizontal diff.
dy = tile[1].y - tile[0].y; // vertical diff.
a1 = Math.atan2(dy, dx); // angle, note dy,dx order here
w = dx|0; // width based on diff for x
// calc vertical angle
dx = tile[3].x - tile[0].x;
dy = tile[3].y - tile[0].y;
a2 = Math.atan2(dx, dy); // note dx,dy order here
h = dy|0;
// draw image to fit parallelogram
// ctx.setTransform(1, a1, a2, 1, tile[0].x, tile[0].y);
ctx.setTransform(1, a1, a2, 1, tile[0].x, tile[0].y);
ctx.drawImage(img, 0, 0, w, h);
}
};
img.src = "http://i.imgur.com/rUeQDjE.png";
</script>
<script src="src.js"></script>
</body>
</html>
