HTML5 Canvas Meme Generator

In this article we pull together some of the things we learned in our HTML5 canvas tutorial to build a simple HTML5 meme-generator web-app. First we present the app, and after we detail how it was built. So, here it is – load an image below, manipulate it, add some text, and download or save and share!



Scale 
 Rotate

Load image:
Download image OR


 


How we built it

Our aim here is to build a simple meme-generator using HTML5 canvas. Our application should support the following:

  • Image loading
  • Simple image transformations
  • Addition of custom text
  • Saving on the web, for sharing/bookmarking
  • Downloading

For more detailed explanation of the canvas functions we are using here, please see this introduction to canvas tutorial.

Setting up the canvas

First of all, we’ll start by setting up our canvas. We set it up as we outlined here:

And the JavaScript to set up the canvas to extend to near the dimensions of the screen looks like this:

Draw image on canvas

We’ll add an initial image to the canvas, so it’s not blank when we begin. We make use of what we learned about images and canvas earlier. First we have an image in markup:

And then we draw it centered on the canvas with:

Scale and rotate transformations

Next we want to add some simple transformation controls, namely rotation and scaling. We’ll use HTML5 range (slider) inputs for each, with appropriate range and step for each:

When either of these are changed, we want to trigger a function to perform the necessary transform. So we attach a listener to the change event.

The function, doTransform() will take the values from our slider inputs and apply the appropriate transforms:

Load custom image into canvas

This thing would be much more useful if you could use your own custom image with it. So, let’s do just that! First we need a file input element in the HTML:

When the value of this input changes we trigger a function loadImage() to handle the image data, and load it into the canvas:

And the imageLoader() function uses the HTML5 FileAPI to load the image:

A word of warning: A peculiar issue exists on Chrome for mobile devices, which causes the page to spontaneoulsy reload when a file is chosen. Discussed in more detail here.

Add some custom text to the canvas

No meme-generator would be complete without being able to add some text. To achieve this, we add a simple text input:

When this changes, we draw the text onto the canvas. We’ll add this code to the doTransform() function. The new code is

This will center the text on one line toward the bottom of the image.

Save the canvas image

To save the image online, we convert the canvas to a dataURL using the toDataURL() function, and then we post this data via AJAX request to a PHP script that decodes the data and writes the image to disk

Download the canvas image

Finally, when we’re done playing with the image and text, we’d like to be able to download it. In the HTML, we’ll add a simple Download link:

In JavaScript we handle the download when the link is clicked by triggering a function prepareDownload(). We saw how to convert a canvas to an image in the previous article.

And that’s it! Happy meme-generating.

Leave a Reply

Exclusive tips, how-tos, news and comment

Receive monthly updates on the world of mobile dev.

Other Afilias Products

Try the world’s leading device detection solution at
DeviceAtlas - Try the world’s leading mobile device detection solution

Evaluate your websites’ mobile readiness with
mobiReady - Evaluate your websites’ mobile readiness.

© 2019 Afilias Technologies Ltd. All rights reserved.

This is a website of Afilias Technologies Ltd, a private company limited by shares, incorporated and registered in the Republic of Ireland with registered number 398040 and registered office at 6th Floor, 2 Grand Canal Square, Dublin 2, Ireland