TriangleScalingZone

by Yuriy -

HTML

<canvas id="canvas" height="500" width="500"></canvas>

JavaScript

var canvas = document.getElementById('canvas'); //destination
var ctx = canvas.getContext("2d");

var canvasSource = document.createElement('canvas'); //source
var ctxSource = canvasSource.getContext("2d");

var canvasLeft = canvas.offsetLeft;
var canvasTop = canvas.offsetTop;
canvas.addEventListener('resize', onWindowResize, false);

var text = "QWER";

var triangles = [
	{
  a: {x: 250, y: 0},
  b: {x: 350, y: 250},
  c: {x: 250, y: 500}
  }
];

var img = new Image();
img.onload = init;
img.src = "https://static-cdn.123rf.com/images/v5/index-thumbnail/52175178-a.jpg";

function init() 
{
	canvasSource.width = canvas.width;
  canvasSource.height = canvas.height;
  
  ctxSource.font = "normal 64px Calibri";
  ctxSource.textAlign = "center";
  ctxSource.textBaseline = "middle";
  
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

  canvas.addEventListener('mousemove', draw, false);
}

function draw(evt) 
{
	function f()
  {
  	drawSourceCanvas(evt.pageX - canvasLeft, evt.pageY - canvasTop);
  	drawScaledScaledCanvas();
  }
  requestAnimationFrame(f);
}

function drawSourceCanvas(x, y) 
{ 
 //draw background
	ctxSource.drawImage(img, 0, 0, canvasSource.width, canvasSource.height);

	//draw text
  ctxSource.save();
  ctxSource.fillStyle = "black";
  ctxSource.translate(x, y);
  ctxSource.fillText( text, 0, 0);
  ctxSource.restore();
}

function drawScaledScaledCanvas() 
{
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	//line 1 equation
  for (var i = 0; i < canvas.height / 2; ++i)
  {
  	var x = (i + 625) / 2.5;
  	ctx.drawImage(
    canvasSource, 
    2 * x - canvasSource.width/2, i,
    canvasSource.width - (2 * x - canvasSource.width/2), 1,
    x - 0.5, i,
    canvasSource.width - (2 * x - canvasSource.width/2) , 1);
  }
 
  //line 2 equation
  for (var i = canvas.height / 2; i < canvas.height; ++i)
  {
  	var x = (1125 - i) / 2.5;
  	ctx.drawImage(
    canvasSource, 
    2 * x - canvasSource.width/2, i,
    canvasSource.width - (2 * x -...