Memes (those hilarious images mixed with text) are everywhere these days. Have a go at my simple Meme Generator and you could be responsible for the next internet meme sensation

Meme Generator 1.0 View source code on

I’ve opted for a brief explanation for this one as opposed to a full fledged detailed tutorial as usual. This is because I got other projects I really want to finish soon. So far this is quite a simple Meme program, future updates can entail image upload support, multiple line text integration (not currently supported in the <canvas> Text class, there’s a way around this still), draggable text objects and more. Keep a look out for future Github commits

HTML Setup

This was alleviated with the help of bootstrap. Their global CSS settings makes creating Forms a quick easy process.  The actual meme is created using the HTML <canvas> element. I would recommend going through the Udacity HTML5 Canvas course if you want to learn how to use it

Javascript Setup

This is where all the <canvas> manipulation is done. To aid the text size readjustments I decided to take advantage of the Object-Oriented nature of Javascript. I created a Text() Class which holds the meme texts actual String variable and its size. To avoid code duplication, memory redundancy and generally make it easier to add more features in future, I used the handy JavaScript option of Prototype Chains:

var Text = function(){
    this.text = "";
    this.size = 50;
};
Text.prototype = {
    /** Dilates (enlarges) text by factor of 10, then sets new text size into canvases context Object */
    dilate : function(){
        this.size += 10;
        context.font = this.size + "pt Impact";
    },
    /** Shrinks text by factor of 10, then sets new text size into canvases context Object */
    shrink : function(){
        this.size -= 10;
        context.font = this.size + "pt Impact";
    }
};

A Prototype chain is just a “inventory” which every created instance of the corresponding Object can have access to. In my case, the Text Objects “inventory” encloses certain methods which I will need to dilate/shrink the text depending on how well it fits within the meme pic. Go through the Udacity Object-oriented Javascript course for a better understanding (and exposition) of JavaScript Prototype Chains

PHP Setup

The PHP at the top and bottom the main.php file is just there for convenience sake

<?php require_once('helper.php'); ?>
<?php
    $arr = array('title'=>'Meme Generator 1.0', 'cssFile'=>'memeStyle.css');
    createTemplate($arr, 'header');
?>
//......
<?php createTemplate(array(), 'footer'); ?>

I just used this technique, formally known as MVC (Model-View-Controller), to basically de-clutter the main.php file as to focus in on only the HTML and JavaScript that powers the Meme program. MVC is a software architectural pattern for implementing user interfaces. It basically proposes I keep the main intellectual aspects of a webpage in one file (Controller; in my case main.php) whilst delegating aesthetical elements of a webpage to different PHP files (Views; header.php, footer.php). If you’ve ever created a WordPress theme, this is the technique used when you assign one file the WordPress wp-head(); action hook and call that file in your index.php file using get_header();.

In my case this wasn’t probably necessary. Its just so that when you view the main.php it’ll be free from all other “distracting” stuff (CSS code, CDN calls etc…).

Generally this is quite a simple HTML <canvas> exercise. Please let me know of any improvements on perfomance or the like down in the comments section! Don’t forget to fork on Github to play with the code