Edit in JSFiddle

define("func", function() {
  return {
    data: {
      form: function($, res, src, reaction) { // "jquery", 'data/result', 'data/source', 'helpers/reactions'
        return function(id, otherObjs) {
          var ret = {
            form: $('#' + id),
            source: src(id),
            result: res(id),
            'reactions': new reaction('#' + id)
          };
          if (otherObjs) {
            for (var x in otherObjs) {
              ret[x] = otherObjs[x];
            }
          }
          return ret;
        }
      },
      result: function($) {
        return function(id) {
          return $('#' + id + ' [name=result]');
        }
      },
      source: function($) {
        return function(id) {
          return $('#' + id + ' [name=source], #' + id + ' [name="source[]"]');
        }
      }
    },
    helpers: {
      init_canvas: function($) {
        $('[data-role="canvas"]').each(function() {
          var canvas = $('<canvas></canvas>'),
            obj = $(this);
          canvas.attr(obj.data());
          obj.replaceWith(canvas);
        });
      },
      loading: function($) {
        return function(parent_id) {
          var parent = $('#' + parent_id);
          var progress = $('<div><div><span class="glyphicon glyphicon-refresh refresh-animate" data-role="animation"></span> <span data-role="msg">Apdorojama...</span></div></div>');
          progress.hide();
          progress.msg = function(msg) {
            $('[data-role="msg"]', progress).html(msg);
          };
          progress.start = function(msg) {
            if (msg) {
              progress.msg(msg);
            }
            progress.show();
            parent.hide();
          };
          progress.stop = function() {
            parent.show();
            progress.hide();
          };
          parent.after(progress);
          return progress;
        };
      },
      reactions: function($) {
        return function(owner) {
          var obj = $(owner);
          this.error = function(error) {
            if (!error.split) {
              return;
            }
            var prefix = 'error' + error.split('-').map(function(txt) {
              return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
            }).join('');
            switch (obj.data(prefix + 'Action')) {
              case 'alert':
                alert(obj.data(prefix + 'Msg'));
                break;
              case 'show':
                $(obj.data(prefix + 'Target')).show();
                break;
            }
          };
        };
      },
      readImageFromField: function($, when) { // 'jquery', 'when'
        return function(field, minWidth, minHeight) {
          field = $(field);
          return when.promise(function(resolve, reject, notify) {
            if (typeof(field.get(0).files) == 'undefined') {
              reject('old-browser');
              $(field).val('');
            } else {
              var file = field.get(0).files[0];
              var fr = new FileReader();
              fr.onload = function() {
                image = new Image();
                image.onerror = function() {
                  reject('cant-read-image');
                  $(field).val('');
                };
                image.onload = function() {
                  if (image.width < minWidth) {
                    reject('image-width-too-small');
                    $(field).val('');
                  } else if (image.height < minHeight) {
                    reject('image-height-too-small');
                    $(field).val('');
                  } else {
                    resolve(image);
                  }
                };
                image.src = fr.result;
              };
              try {
                fr.readAsDataURL(file);
              } catch (ex) {
                reject(ex);
                $(field).val('');
              }
            }
          });
          /*.catch(function (e) {
          					$(field).val('');
          				});*/
        }
      }
    },
    draw: {
      drawGradientBar: function() {
        return function(context, x1, y1, x2, y2, color1, color2) {
          var grd = context.createLinearGradient(0, y1, 0, y2);
          grd.addColorStop(0, color1);
          grd.addColorStop(1, color2);

          context.fillStyle = grd;
          context.fillRect(x1, y1, x2 - x1, y2 - y1);
        };
      },
      drawTransparentBackground: function() {
        return function(context, width, height, stepSize) {
          var grey = false;
          for (var x = 0; x < width; x += stepSize) {
            for (var y = 0; y < height; y += stepSize) {
              if (!(grey = !grey))
                continue;
              context.fillRect(x, y, stepSize, stepSize);
            }
            grey = !grey;
          }
        };
      },
      outlineText: function(strokeText, rgba) { // 'draw/strokeText', 'draw/rgba'
        return function(context, text, x, y, lineWidth, red, green, blue) {
          for (var i = lineWidth; i > 0; i--)
            strokeText(context, text, x, y, i, rgba(red, green, blue, 1.1 - (1 / lineWidth) * i));
        };
      },
      rgba: function() {
        return function(red, green, blue, alpha) {
          return "rgba(" + red + "," + green + "," + blue + "," + alpha + ")";
        }
      },
      setImageSmoothingEnabled: function() {
        return function(enabled) {
          this.imageSmoothingEnabled = enabled;
          this.mozImageSmoothingEnabled = enabled;
        };
      },
      strokeText: function() {
        return function(context, text, x, y, lineWidth, color) {
          context.strokeStyle = color;
          context.lineWidth = lineWidth;
          context.strokeText(text, x, y);
        };
      }
    },
    images: {
      gamersgate: function() {
        var img = new Image();
        img.src = 'data:image/gif;base64,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';
        return img;
      },
      made_in_lithuania: function() {
        var img = new Image();
        img.src = 'data:image/gif;base64,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';
        return img;
      }
    },
    behaviors: {
      move: function() {
        return function(obj) {
          obj = $(obj);
          obj.data({
            x: 0,
            y: 0
          });
          var bg_pos = {
            sx: 0,
            sy: 0
          };
          var dragmode = false;
          obj.bind({
            mousedown: function(event) {
              obj.css('cursor', 'move');
              bg_pos.sx = event.clientX;
              bg_pos.sy = event.clientY;
              dragmode = true;
              obj.trigger('movedStarted');
            },
            mouseup: function(event) {
              obj.css('cursor', 'default');
              dragmode = false;
              obj.trigger('moveFinished');
            },
            mousemove: function(event) {
              if (!dragmode)
                return;
              obj.data('x', obj.data('x') - (bg_pos.sx - event.clientX));
              obj.data('y', obj.data('y') - (bg_pos.sy - event.clientY));
              bg_pos.sx = event.clientX;
              bg_pos.sy = event.clientY;
              obj.trigger('moved');
            }
          });
        };
      },
      zoom: function($, mouseWheel) { // 'jquery', 'jquery.mousewheel'
        return function(obj, zoomLvl) {
          obj = $(obj);
          obj.data('zoom', zoomLvl);
          obj.mousewheel(function(event) {
            obj.data('zoom', obj.data('zoom') + event.deltaY);
            if (obj.data('zoom') < 1) {
              obj.data('zoom', 1);
            }
            event.preventDefault();
            obj.trigger('zoom');
          });
        }
      }
    }
  };
});

define("main", function() {

  // main

  return function(
    $,
    jForm,
    loading,
    init_canvas,
    download,
    img_gamersgate,
    img_made_in_lithuania,
    draw_gradient_bar,
    strokeText,
    outlineText,
    transparentBackgroundDraw,
    readImageFromField,
    imageSmoothingEnabled,
    behaviorMove,
    behaviorZoom
  ) {

    var form = jForm('tool', {
        banner_type: $('#banner_type'),
        game_name: $('#game_name'),
        game_platform: $('#game_platform'),
        banner: $('#banner'),
        game_flag: $('#game_flag'),
        game_image_size: $('#game_image_size')
      }),
      context = form.banner.get(0).getContext("2d"),
      image = {
        box: null,
        background: null,
        gamersgate: img_gamersgate,
        made_in_lithuania: img_made_in_lithuania
      },
      getCaption = function() {
        var caption = form.banner_type.val().toUpperCase(),
          gn = form.game_name.val();
        if (gn) {
          caption += ' | ' + gn;
        }
        var platform = form.game_platform.val()
        if (platform != 'PC')
          caption += ' (' + platform + ')';
        return caption;
      }

    imageSmoothingEnabled(context);

    var redraw = function(options) {
      if (!options) {
        options = {};
      }

      var caption = getCaption();

      context.clearRect(0, 0, 625, 190);
      context.fillStyle = "#BFBFBF";

      if (!options.noTransparent) {
        transparentBackgroundDraw(context, 625, 190, 7);
      }

      if (image.background)
        context.drawImage(
          image.background,
          form.banner.data('x'),
          form.banner.data('y'),
          image.background.width * form.banner.data('zoom') / 100,
          image.background.height * form.banner.data('zoom') / 100
        );

      if (image[form.game_flag.val()]) {
        context.drawImage(
          image[form.game_flag.val()],
          0,
          0
        );
      }

      draw_gradient_bar(context, 0, 190 - 32, 625, 190 - (32 - 12), "#D9DAD5", "#D7D9D4");
      draw_gradient_bar(context, 0, 190 - (32 - 12), 625, 190, "#D7D9D4", "#B1B6B0");

      var active_width = 625;
      if (image.box) {
        switch (form.game_platform.val()) {
          case 'Android':
          case 'iOS':
            active_width -= 190 / 1.79 - (190 / 2.21 - 190 / 1.89);
            break;
          default:
            var ih = (image.box.height > 190) ? 190 : image.box.height;
            var iw = image.box.width / (image.box.height / 190);
            active_width -= iw;
            break;
        }
      }

      context.font = "19px Verdana";

      var textX = (active_width - context.measureText(caption).width) / 2;
      var textY = 190 - (32 - 19) / 1.6;

      outlineText(context, caption, textX, textY, 5, 255, 255, 255);

      context.fillStyle = 'black';
      context.fillText(caption, textX, textY);

      context.fill();
      context.stroke();

      if (image.box) {
        context.shadowColor = 'black';
        context.shadowBlur = 10;
        context.shadowOffsetX = 0;
        context.shadowOffsetY = 0;
        switch (form.game_platform.val()) {
          case 'Android':
          case 'iOS':
            context.drawImage(
              image.box,
              625 - 190 / 1.79,
              190 - 190 / 1.89,
              190 / 2.21,
              190 / 2.21
            );
            break;
          default:
            context.drawImage(
              image.box,
              625 - iw,
              0,
              iw,
              ih
            );
            break;
        }
        context.shadowBlur = 0;
      }

    };
    form.game_image_size.change(function() {
      var val = parseInt($(this).val());
      if (val < 1) {
        val = 1;
        $(this).val(1);
      }
      form.banner.data('zoom', val);
    });
    $('select, input', form.form).bind({
      change: redraw,
      keyup: redraw
    });

    behaviorZoom(form.banner, parseInt(form.game_image_size.val()));
    behaviorMove(form.banner);
    form.banner.bind({
      'moved': redraw,
      'zoom': function() {
        form.game_image_size.val(form.banner.data('zoom'));
        redraw();
      }
    });

    $('[data-role="changeImage"]', form.form).change(function() {
      var obj = $(this);
      readImageFromField(obj, obj.data('width'), obj.data('height')).catch(
        function(error) {
          form.reactions.error(error);
          image[obj.data('key')] = null;
          redraw();
        }).then(function(result) {
        if (typeof result == 'undefined') {
          return;
        }
        image[obj.data('key')] = result;
        redraw();
      });
    });

    form.form.bind({
      submit: function(e) {
        e.preventDefault();

        var filename = form.banner_type.val().toUpperCase(),
          gn = form.game_name.val();
        if (gn) {
          filename += ' - ' + gn;
        }
        filename += ' (' + form.game_platform.val() + ').png';

        redraw({
          noTransparent: true
        });
        var data = form.banner.get(0).toDataURL("image/png");
        redraw();

        download(data, filename, "image/png");
      },
      reset: function() {
        image.box = null;
        image.background = null;
        form.banner.data({
          x: 0,
          y: 0,
          zoom: 100
        });
        redraw();
      }
    });

    $('[data-role="changeImage"]', form.form).change();

  };

});

require.config({
    baseUrl: 'https://cdn.rawgit.com/cujojs/when/3.7.7/',
    paths: {
        
    }
});
require(["main", "func", 'when', 'https://cdn.rawgit.com/rndme/download/v1.4.6/download.js'], function(main, func, when, download) {

  main(
    $, // jquery
    func.data.form($, func.data.result($), func.data.source($), func.helpers.reactions($)), // data/form
    func.helpers.loading($), // helpers/loading
    func.helpers.init_canvas($), // helpers/init_canvas
    download, // download
    func.images.gamersgate(), // images/gamersgate
    func.images.made_in_lithuania(), // images/made_in_lithuania
    func.draw.drawGradientBar(), //'draw/drawGradientBar',
    func.draw.strokeText(), //'draw/strokeText',
    func.draw.outlineText(func.draw.strokeText(), func.draw.rgba()), //'draw/outlineText',
    func.draw.drawTransparentBackground(), //'draw/drawTransparentBackground',
    func.helpers.readImageFromField($, when), //'helpers/readImageFromField',
    func.draw.setImageSmoothingEnabled(), //'draw/setImageSmoothingEnabled',
    func.behaviors.move(), //'behaviors/move',
    func.behaviors.zoom($) //'behaviors/zoom'
  );
});
<div class="container">
  <h3><a href="#" rel="bookmark" title="Permanent Link to Didelių banerių kūrėjas (Games.lt 2008 metų dizaino stiliumi)">Didelių banerių kūrėjas (Games.lt 2008 metų dizaino stiliumi)</a></h3>

  <div class="full-post-content">
    <p>Šis banerių kūrėjas skirtas, sukurti tokio pačio stiliaus didelius banerius, kokie buvo naudojami 2008-ais metais pradėtame naudoti Games.lt dizaine.</p>
    <p>Fono paveikslėlio dydį bei poziciją galima keisti pelės pagalba. Paspaudus kairė pelės klavišą ir tempiant, keičiamos koordinatės. Sukant ratuką, keičiamas mastelis.</p>
    <form data-error-image-height-too-small-msg="Klaida: pasirinktas per mažo aukščio paveikslėlis!" data-error-image-width-too-small-msg="Klaida: pasirinktas per mažo pločio paveikslėlis!" data-error-image-height-too-small-action="alert" data-error-image-width-too-small-action="alert"
    data-error-old-browser-action="show" data-error-old-browser-target=".browserupgrade" id="tool" class="form-horizontal big_banner_editor_gameslt_style" action="javascript://">
      <fieldset>
        <legend>Duomenys</legend>
        <div class="form-group">
          <label class="control-label col-sm-4" for="banner_type">Tipas</label>
          <div class="col-sm-8 input-el">
            <input class="form-control" id="banner_type" maxlength="255" name="banner_type" required="required" type="text" value="Apžvalga">
          </div>
          <p></p>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-4" for="game_name">Rodomas žaidimo pavadinimas</label>
          <div class="col-sm-8 input-el">
            <input class="form-control" id="game_name" maxlength="255" name="game_name" type="text" value="">
          </div>
          <p></p>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-4" for="game_platform">Platforma</label>
          <div class="col-sm-8 input-el">
            <select class="form-control" name="game_platform" id="game_platform">
              <option value="PC">PC</option>
              <option value="PS2">PlayStation 2</option>
              <option value="XBOX">XBOX</option>
              <option value="GCUBE">GameCube</option>
              <option value="GBOY">GameBoy</option>
              <option value="PS3">PlayStation 3</option>
              <option value="PSP">PlayStation Portable</option>
              <option value="DS">Nintendo DS</option>
              <option value="X360">Xbox 360</option>
              <option value="REV">Nintendo Wii</option>
              <option value="MOBILE">Mobile</option>
              <option value="3DS">Nintendo 3DS</option>
              <option value="PSVITA">PlayStation Vita</option>
              <option value="ANDROID">Android</option>
              <option value="PS4">PlayStation 4</option>
              <option value="XO">Xbox One</option>
              <option value="WIIU">WII U</option>
              <option value="Naršyklinis">Web</option>
              <option value="iOS">iOS</option>
              <option value="Android">Android</option>
              <option value="WP7">Windows Phone 7</option>
              <option value="WP8">Windows Phone 8</option>a </select>
          </div>
          <p></p>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-4" for="game_box">Dėžutės paveiksliukas <span class="label label-info" title="Minimalūs matmenys - 190x190 "><i class="fa fa-info "></i></span></label>
          <div class="col-sm-8 input-el">
            <input class="form-control" id="game_box" data-role="changeImage" data-width="100" data-height="190" data-key="box" accept="image/*" name="game_box" type="file">
          </div>
          <p></p>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-4" for="game_image">Fono paveiksliukas <span class="label label-info" title="Minimalūs matmenys - 625x190"><i class="fa fa-info "></i></span></label>
          <div class="col-sm-8 input-el">
            <input class="form-control" data-role="changeImage" data-key="background" data-width="625" data-height="158" id="game_image" accept="image/*" name="game_image" required="true" type="file">
          </div>
          <p></p>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-4" for="game_image_size">Fono paveiksliuko dydis</label>
          <div class="col-sm-8 input-el">
            <input class="form-control" id="game_image_size" max="100" min="1" name="game_image_size" required="true" type="number" value="100">
          </div>
          <p></p>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-4" for="game_flag">Ženkliukas</label>
          <div class="col-sm-8 input-el">
            <select class="form-control" id="game_flag" name="game_flag" required="true">
              <option>Joks</option>
              <option value="gamersgate">GamersGate</option>
              <option value="made_in_lithuania">Pagaminta Lietuvoje!</option>
            </select>
          </div>
          <p></p>
        </div>
      </fieldset>
      <fieldset>
        <legend>Redagavimas</legend>
        <canvas height="190" width="625" id="banner" role="canvas"></canvas>
      </fieldset>
      <fieldset>
        <legend>Rezultatas</legend>
        <p>
          <button type="reset" class="btn btn-danger">Išvalyti formą</button>
          <button type="submit" class="btn btn-primary">Atsisiųsti rezultatą</button>
        </p>
      </fieldset>
    </form>
    <div id="page_error">
      <noscript>Norint pasinaudoti šiuo įrankiu būtina, kad naudojama naršyklė palaikytų JavaScript.</noscript>
    </div>
    <p>Šis banerių kūrėjas skirtas, sukurti tokio pačio stiliaus didelius banerius, kokie buvo naudojami 2008-ais metais pradėtame naudoti Games.lt dizaine.</p>
    <p>Fono paveikslėlio dydį bei poziciją galima keisti pelės pagalba. Paspaudus kairė pelės klavišą ir tempiant, keičiamos koordinatės. Sukant ratuką, keičiamas mastelis.</p>
  </div>

</div>