Skip to content

Instantly share code, notes, and snippets.

Forked from jwill/MemeMaker.html
Created December 30, 2015 20:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rlugojr/e7251803a0aad04cecda to your computer and use it in GitHub Desktop.
Save rlugojr/e7251803a0aad04cecda to your computer and use it in GitHub Desktop.
Starter code for Meme Maker
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
#image-container {
display: flex;
<input type="file" id="file" />
<div id="image-container">
<canvas width="500" height="500"></canvas>
<span>Top Line:</span><br/>
<input id="topLineText" type="text"><br/>
<span>Bottom Line:</span><br/>
<input id="bottomLineText" type="text"><br/>
<button id="saveBtn">Save</button>
function textChangeListener (evt) {
var id =;
var text =;
if (id == "topLineText") {
window.topLineText = text;
} else {
window.bottomLineText = text;
redrawMeme(window.imageSrc, window.topLineText, window.bottomLineText);
function redrawMeme(image, topLine, bottomLine) {
// Get Canvas2DContext
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext("2d");
// Your code here
function saveFile() {'canvas').toDataURL());
function handleFileSelect(evt) {
var canvasWidth = 500;
var canvasHeight = 500;
var file =[0];
var reader = new FileReader();
reader.onload = function(fileObject) {
var data =;
// Create an image object
var image = new Image();
image.onload = function() {
window.imageSrc = this;
redrawMeme(window.imageSrc, null, null);
// Set image data to background image.
image.src = data;
window.topLineText = "";
window.bottomLineText = "";
var input1 = document.getElementById('topLineText');
var input2 = document.getElementById('bottomLineText');
input1.oninput = textChangeListener;
input2.oninput = textChangeListener;
document.getElementById('file').addEventListener('change', handleFileSelect, false);
document.querySelector('button').addEventListener('click', saveFile, false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment