JSFiddle - React, Tailwind, and code Playground

by Lingjia Liu

CSS

@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:100);
img { width: 100%; }

JavaScript

// setup the canvas size;
var IMAGE_WIDTH = 640;
var IMAGE_HEIGHT = 480;

// the sentences to display;
var HORIZONAL_SENTENCE = "WE WISH YOU A MERRY XMAS";
var VERTICAL_SENTENCE = "AND A HAPPY NEW YEAR";

// tweaker the font
var FONT_SIZE = 100;
// font_height/line_height;
var FONT_HEIGHT_TWEAKER = 0.72;

// create a canvas and get context;
var canvas = document.createElement("canvas");
canvas.width = IMAGE_WIDTH;
canvas.height = IMAGE_HEIGHT;
var ctx = canvas.getContext("2d");

// setup font property
ctx.font = FONT_SIZE+"px 'Josefin Sans'";
ctx.textAlign = "center";
ctx.textBaseline = "alphabetic"; // default: alphabetic
var metric;

// draw horizonal sentence;
if(HORIZONAL_SENTENCE) {
    ctx.save();
    metric = ctx.measureText(HORIZONAL_SENTENCE);
    ctx.translate(IMAGE_WIDTH/2, IMAGE_HEIGHT);
    ctx.scale(IMAGE_WIDTH/metric.width, IMAGE_HEIGHT/(FONT_SIZE*FONT_HEIGHT_TWEAKER));
    ctx.fillText(HORIZONAL_SENTENCE, 0, 0);
    ctx.restore();
}

// draw vertical sentence;
if(VERTICAL_SENTENCE) {
    ctx.save();
    metric = ctx.measureText(VERTICAL_SENTENCE);
    ctx.translate(0, IMAGE_HEIGHT/2);
    ctx.rotate(Math.PI/2);
    ctx.scale(IMAGE_HEIGHT/metric.width, IMAGE_WIDTH/(FONT_SIZE*FONT_HEIGHT_TWEAKER));
    ctx.fillText(VERTICAL_SENTENCE, 0, 0);
    ctx.restore();
}

// display canvas;
// document.body.appendChild(canvas);

// display images;
var image = document.createElement("img");
image.src = canvas.toDataURL();
document.body.appendChild(image);