textScaling

by Yuriy -

HTML

<canvas id="canvas" height="450" width="450"></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 text = "QWER";

var textWidth = 0;

init();

function init() 
{
	canvasSource.width = canvas.width * 1.5;
  canvasSource.height = canvas.height;
  
  ctxSource.font = "normal 64px Calibri";
  ctxSource.textAlign = "center";
  ctxSource.textBaseline = "middle";
  
  textWidth = getTextWidth( ctxSource );
  
  clearTexture(ctx, canvas.width, canvas.height);
  
  canvas.addEventListener('mousemove', draw, false);
}

function draw(evt) 
{
  clearTexture(ctx, canvas.width, canvas.height);
  clearTexture(ctxSource, canvasSource.width, canvasSource.height);
  drawSourceText(evt.clientX, evt.clientY);
  drawScaledText();
}

function drawSourceText(x, y) 
{
	var scaleFactor = x - canvas.width / 2;
  scaleFactor = scaleFactor < 0 ? 0 : (scaleFactor);
  
  ctxSource.save();
  ctxSource.fillStyle = "#FFFFFF";
  ctxSource.translate(x + scaleFactor, y);
  ctxSource.fillText( text, 0, 0);
  ctxSource.restore();
}

function drawScaledText() 
{
	//left part
  ctx.drawImage(canvasSource, 0, 0, canvas.width/2, 
  canvas.height, 0, 0, canvas.width/2, canvas.height);
  
  //right part
  ctx.drawImage(canvasSource, canvas.width/2, 0, canvasSource.width - canvas.width/2, 
  canvas.height, canvas.width/2, 0, canvas.width/2, canvas.height);
}

function getTextWidth( ctx )
{
	var metrics = ctx.measureText(text);
  return metrics.width;
}

function clearTexture( ctx, w, h ) 
{
  ctx.fillStyle = "#000000";
  ctx.fillRect(0, 0, w, h);
}