MemeForSanders

<script type="text/javascript">// <![CDATA[
    // Original inspiration from https://mobiforge.com/design-development/html5-canvas-meme-generator

    // Canvas where the pictures are drawn
    var canvas;
    var canvasWidth;
    var ctx;

    // Canvas where the text is drawn
    // Credit for double canvas idea to http://stackoverflow.com/a/26255416/1629241
    var textCanvas;
    var textCtx;

    // Dimensions of margins and objects within the canvas
    var topMargin;
    var leftMargin;
    var rightMargin;
    var middleMargin;
    var bottomMargin;
    var destinationWidth;
    var destinationHeight;
    var proportions;
    var allowedHorizontalForImg;
    var cutOnEachSideForImg;
    var allowedHorizontalForImg2;
    var cutOnEachSideForImg2;


    // Initial setup of the meme
    window.onload = function() {

        // We have a canvas where the keep the pictures, and another
        // canvas on top of it where we keep the text. The text canvas
        // is cleared on each keystroke. The pictures are merged into
        // the text canvas whenever the user wants to save.


        canvas = document.getElementById('memecanvas');
        ctx = canvas.getContext('2d');
        var deviceWidth = window.innerWidth;

        // Draw the canvas
        // TODO: Larger maximum size?
        canvasWidth = Math.min(600, deviceWidth - 20);
        canvasHeight = Math.min(480, deviceWidth - 20);
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;

        // - Compute margins around the pictures -

        // Opening question goes in here
        topMargin = canvas.height * 0.15;

        // Space at the side of the pictures
        leftMargin = canvas.width * 0.05;
        rightMargin = canvas.width * 0.05;
        middleMargin = canvas.width * 0.10;

        // Call to action goes here
        bottomMargin = canvas.height * 0.15;


        // - Set up the text customization boxes -
        var textSetters = document.getElementById("text-customization");
        textSetters.width=canvas.width;
        textSetters.style.position = "absolute";
        textSetters.style.left = leftMargin + "px";
        textSetters.style.top = (canvas.height + 30) + "px";


        // - Crop the pictures and draw them -
        drawImages(canvas);

        // - Be responsive to text update in real time -
        var textBoxesIds = ["custom-text-1", "custom-text-2", "custom-text-3", "custom-text-4", "custom-text-5"];
        for (var i = 0; i < textBoxesIds.length; i++) {
            element = document.getElementById(textBoxesIds[i]);
            element.addEventListener('keyup', updateText, false);
        }
        element = document.getElementById('language-select');
        element.addEventListener('change', updateText, false);
        element = document.getElementById('background-select');
        element.addEventListener('change', backgroundDraw, false);

        // - Set up the call to action and the background color -
        initialTextDraw();
        backgroundDraw();


        // - Set up downloading -

        function handleCanvasMerge(e) {
            // We draw the images into the text canvas
            textCanvas.getContext('2d').fillStyle = canvas.style.backgroundColor;
            textCanvas.getContext('2d').fillRect(0, 0, textCanvas.width, textCanvas.height);
            drawImages(textCanvas);
            updateText(true);
        }

        // Saving by right click
        textCanvas.addEventListener('contextmenu', handleCanvasMerge);

        // Saving with download button
        // Credit for buttom styling to http://stackoverflow.com/questions/710089/how-do-i-make-an-html-link-look-like-a-button
        element = document.getElementById('button-download');
        element.addEventListener('click', function(e) {
            handleCanvasMerge(e);
            var dataURL = textCanvas.toDataURL('image/png');
            document.getElementById('button-download').href = dataURL;
        })

        // TODO: Sharing buttons?
        // TODO: Improve design?

    }


    // Draw images on canvas
    function drawImages(canvasToDraw) {

        canvasToDrawCtx = canvasToDraw.getContext('2d');

        img = document.getElementById('bern-image');
        img2 = document.getElementById('hill-image');

        // Proportions for the pictures within the canvas, horizontal divided by vertical
        destinationWidth = (canvasToDraw.width - leftMargin - rightMargin - middleMargin) * 0.5;
        destinationHeight = canvasToDraw.height - topMargin - bottomMargin;
        proportions = ( destinationWidth / (canvasToDraw.height - topMargin - bottomMargin));

        // TODO: Also crop vertically if using different pictures?
        // Determine how do we crop the original pictures, and draw them
        allowedHorizontalForImg = img.height * proportions;
        cutOnEachSideForImg = (img.width - allowedHorizontalForImg) / 2.0;
        canvasToDrawCtx.drawImage(img, cutOnEachSideForImg, 0, img.width - 2.0*cutOnEachSideForImg, img.height,
                    leftMargin, topMargin, destinationWidth, destinationHeight);

        allowedHorizontalForImg2 = img2.height * proportions;
        cutOnEachSideForImg2 = (img2.width - allowedHorizontalForImg2) / 2.0;
        canvasToDrawCtx.drawImage(img2, cutOnEachSideForImg2, 0, img2.width - 2.0*cutOnEachSideForImg2, img2.height,
                    leftMargin + middleMargin + destinationWidth, topMargin, destinationWidth, destinationHeight);

    }


    // Set up the background color and the call to action text
    function backgroundDraw() {

        // This resets the background drawn in the text canvas when we export the image
        updateText();

        var canvasForBackground = document.getElementById('memecanvas');
        var backgroundColor = document.getElementById('background-select');
        if ( (backgroundColor.color[0].checked && backgroundColor.color[0].value == "black") ||
                (backgroundColor.color[1].checked && backgroundColor.color[1].value == "black")){
            canvasForBackground.style.background = "black";
        } else {
            canvasForBackground.style.background = "white";
        }

    }


    // Set up the call to action text at the bottom
    function initialTextDraw(doNotClearPrevious) {

        // Set up the text canvas
        textCanvas = document.getElementById('textcanvas');
        textCxt = textCanvas.getContext('2d');


        // We clear previous text on a text update, but not on preparation for a save
        if (doNotClearPrevious != true) {
            textCanvas.height = canvas.height;
            textCanvas.width = canvas.width;
            textCxt.clearRect(0, 0, textCanvas.width, textCanvas.height);
            textCanvas.style.background = "transparent";
        }


        // We draw the call to action
        textCxt.lineWidth = 3;
        textCxt.strokeStyle = 'black';
        textCxt.fillStyle = 'white';
        textCxt.textAlign = 'center';
        textCxt.font = '30pt sans-serif';


        // Figure out the location and language for the text
        var horizontalEdgeForText = textCanvas.width * 0.5;
        YForText = destinationHeight + topMargin + 0.6 * bottomMargin;
        var callToAction = document.getElementById('language-select');
        var callToActionText = "";
        if ( (callToAction.language[0].checked && callToAction.language[0].value == "English") ||
                (callToAction.language[1].checked && callToAction.language[1].value == "English")){
            callToActionText = "VOTE BERNIE";
        } else {
            callToActionText = "SANDERS PRESIDENTE";
        }


        textCxt.strokeText(callToActionText, horizontalEdgeForText, YForText);
        textCxt.fillText(callToActionText, horizontalEdgeForText, YForText);
    }


    // Set up the question and answers in the meme
    function updateText(doNotClearPrevious) {

        // - Compute the question and answers, with nothing shown if the default text is still set -

        // Sets up the canvas and the call to action

        initialTextDraw(doNotClearPrevious);

        // Determine question we show candidates answers to
        var question = document.getElementById('custom-text-1').value
        if (question == "Question") {
            question = "";
        }

        // Determine Bernie answers
        var answerTop1 = document.getElementById('custom-text-2').value;
        if (answerTop1 == "Bernie answer, line 1") {
            answerTop1 = "";
        }
        var answerBottom1 = document.getElementById('custom-text-4').value;
        if (answerBottom1 == "Bernie answer, line 2 (optional)") {
            answerBottom1 = "";
        }

        // Determine Hillary answers
        var answerTop2 = document.getElementById('custom-text-3').value;
        if (answerTop2 == "Hillary answer, line 1") {
            answerTop2 = "";
        }
        var answerBottom2 = document.getElementById('custom-text-5').value;
        if (answerBottom2 == "Hillary answer, line 2 (optional)") {
            answerBottom2 = "";
        }

        // - Display the question and answers -

        // Style
        textCxt.lineWidth = 3;
        textCxt.font = '30pt sans-serif';
        textCxt.strokeStyle = 'black';
        textCxt.fillStyle = 'white';
        textCxt.textAlign = 'center';

        // Question
        var horizontalEdgeForText = textCanvas.width/2;
        if (question.length > 30) {
            textCxt.font = '25pt sans-serif';
        }
        textCxt.strokeText(question, horizontalEdgeForText, topMargin * 0.5);
        textCxt.fillText(question, horizontalEdgeForText, topMargin * 0.5);


        // Answers
        textCxt.font = '20pt sans-serif';
        horizontalEdgeForText = leftMargin + destinationWidth * 0.5;
        // Answers in different position depending on whether there are one or two of them for
        // each candidate
        if (answerBottom1 != "") {
            var highestYForText = destinationHeight * 0.33 + topMargin;
            textCxt.strokeText(answerTop1, horizontalEdgeForText, highestYForText);
            textCxt.fillText(answerTop1, horizontalEdgeForText, highestYForText);

            var lowestYForText = destinationHeight*0.67 + topMargin;
            textCxt.strokeText(answerBottom1, horizontalEdgeForText, lowestYForText);
            textCxt.fillText(answerBottom1, horizontalEdgeForText, lowestYForText);
        } else {
            var YForText = (destinationHeight * 0.5) + topMargin;
            textCxt.strokeText(answerTop1, horizontalEdgeForText, YForText);
            textCxt.fillText(answerTop1, horizontalEdgeForText, YForText);
        }

        horizontalEdgeForText = leftMargin + destinationWidth + middleMargin + destinationWidth * 0.5;
        if (answerBottom2 != "") {
            var highestYForText = destinationHeight * 0.33 + topMargin;
            textCxt.strokeText(answerTop2, horizontalEdgeForText, highestYForText);
            textCxt.fillText(answerTop2, horizontalEdgeForText, highestYForText);

            var lowestYForText = destinationHeight*0.67 + topMargin;
            textCxt.strokeText(answerBottom2, horizontalEdgeForText, lowestYForText);
            textCxt.fillText(answerBottom2, horizontalEdgeForText, lowestYForText);
        } else {
            var YForText = destinationHeight * 0.5 + topMargin;
            textCxt.strokeText(answerTop2, horizontalEdgeForText, YForText);
            textCxt.fillText(answerTop2, horizontalEdgeForText, YForText);
        }

    };


// ]]&gt;</script>




<img id="bern-image" style="display: none;" src="http://i.imgur.com/G86fBCV.jpg" crossorigin="anonymous" alt =""  />


<img id="hill-image" style="display: none;" src="http://i.imgur.com/bGYckyw.jpg" crossorigin="anonymous"  alt =""  />

<div style="position: relative;">

<canvas id="memecanvas" style="position: absolute; left: 0; top: 0; z-index:0;">
    It doesn't seem possible to display this on your device. Sorry!
</canvas>

<canvas id="textcanvas" style="position: absolute; left: 0; top: 0; z-index:1;">
</canvas>
</div>

<br>

<div id="text-customization" style="font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif; font-size: 14px">

    <input id="custom-text-1" type="text" value="Question" style="position: static;"> </br>
    <input id="custom-text-2" type="text" value="Bernie answer, line 1" style="width: 300px;" maxlength="20">
    <input id="custom-text-3" type="text" value="Hillary answer, line 1" style="width: 300px;" maxlength="20">

    </br>

    <input id="custom-text-4" width="300" type="text" value="Bernie answer, line 2 (optional)" style="width: 300px;" maxlength="20">
    <input id="custom-text-5" width="300" type="text" value="Hillary answer, line 2 (optional)" style="width: 300px;" maxlength="20">  </br>


    <form id="language-select">
        <input type="radio" name="language" value="English" checked="1"> English
        <input type="radio" name="language" value="Spanish"> Espa&#241;ol
    </form>

    <form id="background-select">
        <input type="radio" name="color" value="black" checked="1"> Black background
        <input type="radio" name="color" value="white"> White background
    </form>

    <a href="#" download="bernie-meme.png" id="button-download" style="text-decoration: none; background-color: #EEEEEE; color: #333333;padding: 0px 6px 0px 6px; border-top: 1px solid #CCCCCC; border-right: 1px solid #333333; border-bottom: 1px solid #333333; border-left: 1px solid #CCCCCC">
        Download
    </a>


    <p>
        Spread the word around! And remember, many people outside heavy Internet users haven't even heard of Bernie yet.
    </p>


    <p>
        Turn device sideways for better use in mobile device. If downloading doesn't work in the Android default browser, trying in Firefox or Chrome might fix it.
    </p>


</div>