stdekker · February 3, 2018 10:59
diff --git a/beam-text-canvas.html b/beam-text-canvas.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Beam-text canvas</title>
 </head>
 <body>

 	<canvas id="poster"></canvas>

 	<script>

  var canvas = document.getElementById('poster');
  var ctx = canvas.getContext('2d');

  var color1 = '#ec1b23'; // SP Red
  var color2 = '#ffe300'; // Warm yellow
  var color3 = '#ffffff'; // Bright white
  var color4 = '#eeeeee'; // Light grey

  canvas.width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  canvas.height =  canvas.width;

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = color4;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  var heightCenter = canvas.height / 2; 
  var widthCenter = canvas.width / 2;

  // Responsiveness rules
  fontHeight = 24;
  lineHeight = 1.14;
  strokeWidth = 4;

  if(canvas.width > 480) {
    fontHeight = 48;
    strokeWidth = 6;
  }
  if(canvas.width > 768) {
    fontHeight = 62;
    strokeWidth = 8;
  }

  drawBeamText(ctx,canvas, "Altijd",color1,color2,widthCenter,0,1,.66,fontHeight * .7,strokeWidth);
  drawBeamText(ctx,canvas, "IN DE", color3, color1,widthCenter,fontHeight + lineHeight,1,1, fontHeight,strokeWidth);
  drawBeamText(ctx,canvas, "BUURT", color1, color2,widthCenter,fontHeight * 2.28,-1,.66, fontHeight * 2,strokeWidth);

 function drawBeamText(ctx,canvas,string,colorFill,colorStroke,startX,startY,transX,transY,minFont,strokeWidth) {
   
   string = string.toUpperCase();
   
   var iterations = canvas.width;
   var fontHeight = minFont;
   var fontName = 'Helvetica Inserat LT Std';

   if (string == 'icon-tomato') {
       fontName = 'SPruit-icons';
       string = 'T';
   }

   // Resize to fit
   ctx.font = fontHeight + 'px ' + fontName;
   var textWidth = ctx.measureText(string).width;
   
   // Responsiveness
   var maxDrawWidth =  canvas.width - 48;
   if (canvas.width > 1080) {
     maxDrawWidth = 1080;
   }

   while (textWidth > maxDrawWidth) {
       fontHeight--;
       ctx.font = fontHeight + 'px ' + fontName;
       textWidth = ctx.measureText(string).width;
   }

   startX -= textWidth / 2;

   // Create an offscreen canvas with text dimensions
   var imgc = document.createElement('canvas');
   imgc.width = textWidth + strokeWidth + 32 ; // Needs a safe margin?
   imgc.height = fontHeight + strokeWidth + 32 ;
   var ctxOff = imgc.getContext('2d');
  
   // Paint once
   ctxOff.textAlign = 'start';
   ctxOff.textBaseline = 'top';
   ctxOff.strokeStyle = colorStroke;
   ctxOff.lineWidth = strokeWidth;
   ctxOff.font = ctx.font;
   ctxOff.strokeText(string,strokeWidth,strokeWidth);
   
   // Paint many for the beam
   var curWidth = imgc.width;
   var curHeight = imgc.height;
   var ratio = curWidth / curHeight;
   var scale = .2;

   for (i = 0; i < iterations; i++) {
       curWidth -= scale;
       curHeight -= scale / ratio;
       if (curHeight < 0) {
         curHeight = 0;
       }
       if (curWidth < 0) {
         curHeight = 0;
       }
       ctx.drawImage(imgc, startX + (transX * i), startY + (transY * i), curWidth, curHeight);
   }
   // Cap
   ctx.textAlign = 'start';
   ctx.textBaseline = 'top';
   ctx.fillStyle = colorFill;
   ctx.fillText(string, strokeWidth + startX, startY + strokeWidth);

 }
        </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Beam-text canvas</title>
	</head>
	<body>

	<canvas id="poster"></canvas>

	<script>

	var canvas = document.getElementById('poster');
	var ctx = canvas.getContext('2d');

	var color1 = '#ec1b23'; // SP Red
	var color2 = '#ffe300'; // Warm yellow
	var color3 = '#ffffff'; // Bright white
	var color4 = '#eeeeee'; // Light grey

	canvas.width = Math.max(document.documentElement.clientWidth, window.innerWidth \|\| 0);
	canvas.height = canvas.width;

	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.fillStyle = color4;
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	var heightCenter = canvas.height / 2;
	var widthCenter = canvas.width / 2;

	// Responsiveness rules
	fontHeight = 24;
	lineHeight = 1.14;
	strokeWidth = 4;

	if(canvas.width > 480) {
	fontHeight = 48;
	strokeWidth = 6;
	}
	if(canvas.width > 768) {
	fontHeight = 62;
	strokeWidth = 8;
	}

	drawBeamText(ctx,canvas, "Altijd",color1,color2,widthCenter,0,1,.66,fontHeight * .7,strokeWidth);
	drawBeamText(ctx,canvas, "IN DE", color3, color1,widthCenter,fontHeight + lineHeight,1,1, fontHeight,strokeWidth);
	drawBeamText(ctx,canvas, "BUURT", color1, color2,widthCenter,fontHeight * 2.28,-1,.66, fontHeight * 2,strokeWidth);

	function drawBeamText(ctx,canvas,string,colorFill,colorStroke,startX,startY,transX,transY,minFont,strokeWidth) {

	string = string.toUpperCase();

	var iterations = canvas.width;
	var fontHeight = minFont;
	var fontName = 'Helvetica Inserat LT Std';

	if (string == 'icon-tomato') {
	fontName = 'SPruit-icons';
	string = 'T';
	}

	// Resize to fit
	ctx.font = fontHeight + 'px ' + fontName;
	var textWidth = ctx.measureText(string).width;

	// Responsiveness
	var maxDrawWidth = canvas.width - 48;
	if (canvas.width > 1080) {
	maxDrawWidth = 1080;
	}

	while (textWidth > maxDrawWidth) {
	fontHeight--;
	ctx.font = fontHeight + 'px ' + fontName;
	textWidth = ctx.measureText(string).width;
	}

	startX -= textWidth / 2;

	// Create an offscreen canvas with text dimensions
	var imgc = document.createElement('canvas');
	imgc.width = textWidth + strokeWidth + 32 ; // Needs a safe margin?
	imgc.height = fontHeight + strokeWidth + 32 ;
	var ctxOff = imgc.getContext('2d');

	// Paint once
	ctxOff.textAlign = 'start';
	ctxOff.textBaseline = 'top';
	ctxOff.strokeStyle = colorStroke;
	ctxOff.lineWidth = strokeWidth;
	ctxOff.font = ctx.font;
	ctxOff.strokeText(string,strokeWidth,strokeWidth);

	// Paint many for the beam
	var curWidth = imgc.width;
	var curHeight = imgc.height;
	var ratio = curWidth / curHeight;
	var scale = .2;

	for (i = 0; i < iterations; i++) {
	curWidth -= scale;
	curHeight -= scale / ratio;
	if (curHeight < 0) {
	curHeight = 0;
	}
	if (curWidth < 0) {
	curHeight = 0;
	}
	ctx.drawImage(imgc, startX + (transX * i), startY + (transY * i), curWidth, curHeight);
	}
	// Cap
	ctx.textAlign = 'start';
	ctx.textBaseline = 'top';
	ctx.fillStyle = colorFill;
	ctx.fillText(string, strokeWidth + startX, startY + strokeWidth);

	}
	</script>
	</body>
	</html>