daliborgogic/gist:5fe2a46fa5307a2b8d70

## gistfile1

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #center, #left, #right {
        border:1px solid red;
      }
    </style>
  </head>
  <body>
    <canvas id="image" width="300" height="300"></canvas>
    <canvas id="center" width="300" height="300"></canvas>
    <canvas id="right" width="300" height="300"></canvas>
    <canvas id="left" width="300" height="300"></canvas>
    <script>


      // center ////////////////////////////////////////////////////////////////
      function wrapText(context, text, x, y, maxWidth, lineHeight) {
        var words = text.split(' ');
        var line = '';

        for(var n = 0; n < words.length; n++) {
          var testLine = line + words[n] + ' ';
          var metrics = context.measureText(testLine);
          var testWidth = metrics.width;
          if (testWidth > maxWidth && n > 0) {
            context.fillText(line, x, y);
            line = words[n] + ' ';
            y += lineHeight;
          }
          else {
            line = testLine;
          }
        }
        context.fillText(line, x, y);
      }

      var canvas = document.getElementById('center');
      var context = canvas.getContext('2d');
      make_base();
      function make_base()
      {
        base_image = new Image();
        base_image.src = 'hmm.png';
        base_image.onload = function(){
          context.drawImage(base_image, 300, 300);
        }
      }
      var maxWidth = 300;
      var lineHeight = 25;
      var x = canvas.width /2;
      var y = 60;
      var text = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, debitis, ea. Harum, debitis placeat nisi iusto blanditiis officia quibusdam optio?';

      context.font = '16pt Arial';
      context.fillStyle = '#333';
      context.textAlign='center';

      wrapText(context, text, x, y, maxWidth, lineHeight);

      // left //////////////////////////////////////////////////////////////////
      function wrapText(context, text, x, y, maxWidth, lineHeight) {
        var words = text.split(' ');
        var line = '';

        for(var n = 0; n < words.length; n++) {
          var testLine = line + words[n] + ' ';
          var metrics = context.measureText(testLine);
          var testWidth = metrics.width;
          if (testWidth > maxWidth && n > 0) {
            context.fillText(line, x, y);
            line = words[n] + ' ';
            y += lineHeight;
          }
          else {
            line = testLine;
          }
        }
        context.fillText(line, x, y);
      }

      var canvas = document.getElementById('left');
      var context = canvas.getContext('2d');
      var maxWidth = 290;
      var lineHeight = 22;
      var x = 10;
      var y = 60;
      var text = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, debitis, ea. Harum, debitis placeat nisi iusto blanditiis officia quibusdam optio?';

      context.font = 'italic 14pt Arial';
      context.fillStyle = '#333';
      context.textAlign='left';

      wrapText(context, text, x, y, maxWidth, lineHeight);

      //right //////////////////////////////////////////////////////////////////
      function wrapText(context, text, x, y, maxWidth, lineHeight) {
        var words = text.split(' ');
        var line = '';

        for(var n = 0; n < words.length; n++) {
          var testLine = line + words[n] + ' ';
          var metrics = context.measureText(testLine);
          var testWidth = metrics.width;
          if (testWidth > maxWidth && n > 0) {
            context.fillText(line, x, y);
            line = words[n] + ' ';
            y += lineHeight;
          }
          else {
            line = testLine;
          }
        }
        context.fillText(line, x, y);
      }

      var canvas = document.getElementById('right');
      var context = canvas.getContext('2d');
      var maxWidth = 290;
      var lineHeight = 16;
      var x = canvas.width;
      var y = 60;
      var text = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, debitis, ea. Harum, debitis placeat nisi iusto blanditiis officia quibusdam optio?';

      context.font = 'italic bold 12pt Arial';
      context.fillStyle = '#333';
      context.textAlign='right';

      wrapText(context, text, x, y, maxWidth, lineHeight);


      // img ////////////////////////////////////////////////////////////////
      var canvas = document.getElementById('image');
      var context = canvas.getContext('2d');
      var imageObj = new Image();
      var frame = new Image();
      var sticker = new Image();
      var maxWidth = canvas.width - 40;
      var lineHeight = 16;
      var x = canvas.width - 20;

      var y = 230;
      var text = 'I iusto blanditiis officia quibusdam optio?';

      imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0);
        context.drawImage(frame, 0, 0);
        context.drawImage(sticker, 200, 50);
        context.font = 'italic bold 12pt Arial';
        context.fillStyle = '#fff';
        context.textAlign='right';
        wrapText(context, text, x, y, maxWidth, lineHeight);

      };
      imageObj.src = 'hmm.png';
      frame.src = 'frame.png';
      sticker.src = 'sticker.png';

      // save canvas image as data url (png format by default)
      var dataURL = canvas.toDataURL();

      document.getElementById('image').src = dataURL;
    </script>
  </body>
</html>

	<!DOCTYPE HTML>
	<html>
	<head>
	<style>
	body {
	margin: 0px;
	padding: 0px;
	}
	#center, #left, #right {
	border:1px solid red;
	}
	</style>
	</head>
	<body>
	<canvas id="image" width="300" height="300"></canvas>
	<canvas id="center" width="300" height="300"></canvas>
	<canvas id="right" width="300" height="300"></canvas>
	<canvas id="left" width="300" height="300"></canvas>
	<script>


	// center ////////////////////////////////////////////////////////////////
	function wrapText(context, text, x, y, maxWidth, lineHeight) {
	var words = text.split(' ');
	var line = '';

	for(var n = 0; n < words.length; n++) {
	var testLine = line + words[n] + ' ';
	var metrics = context.measureText(testLine);
	var testWidth = metrics.width;
	if (testWidth > maxWidth && n > 0) {
	context.fillText(line, x, y);
	line = words[n] + ' ';
	y += lineHeight;
	}
	else {
	line = testLine;
	}
	}
	context.fillText(line, x, y);
	}

	var canvas = document.getElementById('center');
	var context = canvas.getContext('2d');
	make_base();
	function make_base()
	{
	base_image = new Image();
	base_image.src = 'hmm.png';
	base_image.onload = function(){
	context.drawImage(base_image, 300, 300);
	}
	}
	var maxWidth = 300;
	var lineHeight = 25;
	var x = canvas.width /2;
	var y = 60;
	var text = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, debitis, ea. Harum, debitis placeat nisi iusto blanditiis officia quibusdam optio?';

	context.font = '16pt Arial';
	context.fillStyle = '#333';
	context.textAlign='center';

	wrapText(context, text, x, y, maxWidth, lineHeight);

	// left //////////////////////////////////////////////////////////////////
	function wrapText(context, text, x, y, maxWidth, lineHeight) {
	var words = text.split(' ');
	var line = '';

	for(var n = 0; n < words.length; n++) {
	var testLine = line + words[n] + ' ';
	var metrics = context.measureText(testLine);
	var testWidth = metrics.width;
	if (testWidth > maxWidth && n > 0) {
	context.fillText(line, x, y);
	line = words[n] + ' ';
	y += lineHeight;
	}
	else {
	line = testLine;
	}
	}
	context.fillText(line, x, y);
	}

	var canvas = document.getElementById('left');
	var context = canvas.getContext('2d');
	var maxWidth = 290;
	var lineHeight = 22;
	var x = 10;
	var y = 60;
	var text = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, debitis, ea. Harum, debitis placeat nisi iusto blanditiis officia quibusdam optio?';

	context.font = 'italic 14pt Arial';
	context.fillStyle = '#333';
	context.textAlign='left';

	wrapText(context, text, x, y, maxWidth, lineHeight);

	//right //////////////////////////////////////////////////////////////////
	function wrapText(context, text, x, y, maxWidth, lineHeight) {
	var words = text.split(' ');
	var line = '';

	for(var n = 0; n < words.length; n++) {
	var testLine = line + words[n] + ' ';
	var metrics = context.measureText(testLine);
	var testWidth = metrics.width;
	if (testWidth > maxWidth && n > 0) {
	context.fillText(line, x, y);
	line = words[n] + ' ';
	y += lineHeight;
	}
	else {
	line = testLine;
	}
	}
	context.fillText(line, x, y);
	}

	var canvas = document.getElementById('right');
	var context = canvas.getContext('2d');
	var maxWidth = 290;
	var lineHeight = 16;
	var x = canvas.width;
	var y = 60;
	var text = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, debitis, ea. Harum, debitis placeat nisi iusto blanditiis officia quibusdam optio?';

	context.font = 'italic bold 12pt Arial';
	context.fillStyle = '#333';
	context.textAlign='right';

	wrapText(context, text, x, y, maxWidth, lineHeight);


	// img ////////////////////////////////////////////////////////////////
	var canvas = document.getElementById('image');
	var context = canvas.getContext('2d');
	var imageObj = new Image();
	var frame = new Image();
	var sticker = new Image();
	var maxWidth = canvas.width - 40;
	var lineHeight = 16;
	var x = canvas.width - 20;

	var y = 230;
	var text = 'I iusto blanditiis officia quibusdam optio?';

	imageObj.onload = function() {
	context.drawImage(imageObj, 0, 0);
	context.drawImage(frame, 0, 0);
	context.drawImage(sticker, 200, 50);
	context.font = 'italic bold 12pt Arial';
	context.fillStyle = '#fff';
	context.textAlign='right';
	wrapText(context, text, x, y, maxWidth, lineHeight);

	};
	imageObj.src = 'hmm.png';
	frame.src = 'frame.png';
	sticker.src = 'sticker.png';

	// save canvas image as data url (png format by default)
	var dataURL = canvas.toDataURL();

	document.getElementById('image').src = dataURL;
	</script>
	</body>
	</html>