textScaling

by Yuriy -

HTML

<canvas id="canvas" height="220" width="450"></canvas>
<canvas id="canvasS" height="220" width="450"></canvas>

JavaScript

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

var canvasSource = document.getElementById('canvasS');//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() 
{
	var tempCanvas = document.createElement('canvas');
  var ctxTemp = tempCanvas.getContext("2d");
  tempCanvas.width = canvas.width / 2;
	tempCanvas.height = canvas.height;
  
  //draw left part without changes
  var sourceImage = ctxSource.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
  ctxTemp.putImageData(sourceImage, 0, 0);
  ctx.drawImage(tempCanvas, 0, 0);
  
  //draw right part scaled twice by width
  tempCanvas.width = canvasSource.width - canvas.width/2;
  sourceImage = ctxSource.getImageData(canvas.width/2, 0, tempCanvas.width, tempCanvas.height);
  ctxTemp.putImageData(sourceImage, 0, 0);
  ctx.save();
  ctx.scale(0.5, 1);
  ctx.drawImage(tempCanvas, canvas.width, 0);
  ctx.restore();
}

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