Quote Tool

A tool for generating simple images with a quote and its source

by DominoPivot

HTML

<canvas id="c"></canvas>

JavaScript

var MARGIN = 20;
var SPACING = 5;
var QUOTE_FONT = 'italic 20px serif';
var QUOTE_FONT_SIZE = 20;
var SOURCE_FONT = '15px sans-serif';
var SOURCE_FONT_SIZE = 15;
var BACKGROUND_COLOR = 'white';
var FOREGROUND_COLOR = 'black';

var c = document.querySelector('#c').getContext('2d');
c.canvas.addEventListener('click', function(e) { drawQuote(); });

function drawQuote(quote, source) {
	var quote = quote || prompt('Enter quote text, use # for line breaks.') || 'Hello World!';
  quote = quote.split('#');
  var source = '― ' + (source || prompt('Enter quote author') || 'Quote Tool');
	c.font = QUOTE_FONT;
  var quoteWidth = 0;
  for (var line = 0; line < quote.length; ++line) {
    quoteWidth = Math.max(quoteWidth, c.measureText(quote[line]).width);
  }
	
  c.font = SOURCE_FONT;
  var sourceWidth = c.measureText(source).width;
  
  c.canvas.width = Math.max(quoteWidth, sourceWidth + quoteWidth / 2) + 2*MARGIN;
  c.canvas.height = QUOTE_FONT_SIZE*quote.length + SOURCE_FONT_SIZE + SPACING + 2*MARGIN;
  // warning, resets canvas style
  
  c.fillStyle = BACKGROUND_COLOR;
  c.fillRect(0, 0, c.canvas.width, c.canvas.height);
  c.fillStyle = FOREGROUND_COLOR;
  
  c.textBaseline = 'top';
  
  c.font = QUOTE_FONT;
  c.textAlign = 'left';
  for (var line = 0; line < quote.length; ++line) {
    c.fillText(quote[line], MARGIN, MARGIN + QUOTE_FONT_SIZE*line);
  }
  c.font = SOURCE_FONT;
  c.textAlign = 'right';
  c.fillText(source, c.canvas.width - MARGIN, MARGIN + QUOTE_FONT_SIZE*quote.length + SPACING);
}

drawQuote('Click to draw a quote.', 'Quote Tool');