Javascript 模因生成器问题

我在一个网站中加入了一个meme生成器，网址为：。我正在尝试做各种各样的事情 1.我希望能够添加一个共享按钮，在它生成到社交媒体网站（如Fb和Twitter）后，可以共享该meme 2.我希望在meme generator中的移动设备上，字体保持不变，用户在其中键入他或她的meme。它在移动设备上看起来不同。 3.我还想在meme中添加不可更改的文本。我上传了一个模板

这是我从中使用的代码

代码：

//CAN\NVAS.js插件
//尼尼弗特，2016年12月
（功能（窗口、文档）{
/**
*CAN\VAS插件-向画布添加换行符
*@arg{string}[str=Hello World]-要绘制的文本
*@arg{number}[x=0]-文本的左上角x坐标
*@arg{number}[y=textSize]-文本的左上角y坐标
*@arg{number}[w=画布宽度]-绘制文本的最大宽度
*@arg{number}[lh=1]-线高度
*@arg{number}[method=fill]-文本绘制方法，如果“无”，则不会呈现文本
*/
CanvasRenderingContext2D.prototype.drawBreakingText=函数（str、x、y、w、lh、method）{
//局部变量和默认值
var textSize=parseInt（this.font.replace（/\D/gi'）；
var textParts=[]；
var textPartsNo=0；
var-words=[]；
var currLine=''；
var testLine=''；
str=str | |''；
x=x | | 0；
y=y | | 0；
w=w | | this.canvas.width；
lh=lh | | 1；
方法=方法| |“填充”；
//手动换行符
textParts=str.split（'\n'）；
textPartsNo=textParts.length；
//把各部分的字分开
对于（变量i=0；iw&&j>0）{
textParts.push（currLine）；
currLine=字[i][j]+''；
}否则{
currLine=测试线；
}
}
//replace是删除尾随空格
textParts.push（currLine）；
}
//在画布上呈现文本
对于（变量i=0；i另存为'）；
win.document.body.style.padding='1em'；
};
函数样式（字体、大小、对齐、基础）{
ctx.font=大小+像素+字体；
ctx.textAlign=align；
ctx.textBaseline=基准；
}
函数绘图（）{
//文本的大写字母
var top=textTop.toUpperCase（）；
var bottom=textBottom.toUpperCase（）；
//设置适当的画布大小
canvas.width=image.width；
canvas.height=image.height；
//画图像
ctx.drawImage（图像，0，0，canvas.width，canvas.height）；
//风格
ctx.fillStyle='#fff'；
ctx.strokeStyle='#000'；
ctx.lineWidth=画布宽度*0.004；
var_textSizeTop=textSizeTop/100*canvas.width；
var_textSizeBottom=textSizeBottom/100*canvas.width；
//绘制顶部文本
样式（'Impact'，_textSizeTop，'
<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A//www.meetmckenziemason.com/meme.html"><i class="fa fa-facebook-square fa-2x"></i></a>
<a href="https://twitter.com/home?status=http%3A//www.meetmckenziemason.com/meme.html"><i class="fa fa-twitter-square fa-2x"></i></a>