Javascript HTML-Canvas元素增加大小，但保持内容大小不变

我正在创建一个画布，为我正在制作的2d游戏创建简单的高度图。在常规画布大小（150px*300px）下，这看起来很正常，但是如果我想放大画布（对于更大的地图）并保持内部内容的大小不变，那么我目前正在做的事情就行不通了

我的代码在这里：

var hai=1//世界宽度。我对此进行了修补，以获得我想要的结果，但最终，整个heigtmap需要通过base64 url导出。5 canvas'紧挨在一起看起来就像我想要的，但我无法为所有5个一起获得base64 url，只有一个。
var-runnin=0；
while（runnin！=hai）{
var can=document.createElement（“画布”）；
can.id=“画布”
can.style=“宽度：150px；高度：75px；”
document.body.appendChild（can）；
c=document.getElementById（'canvasite'），
ctx=c.getContext（'2d'）；
变量x=0
如果（runnin==0）{
var endheight=c.height/2
}
var y=末端高度；
var widd=0
while（widd！=c.宽度）{
ctx.fillStyle=“rgba（“+0+”、“+255+”、“+0+”、“+（255/255）+”）；
ctx.fillRect（x，y，1，1）；
var ychan=数学地板（（数学随机（）*6）+1）；
if（ychan==1）{
变量y=y+2
}else if（ychan==2）{
变量y=y+1
}else if（ychan==3）{
变量y=y-1
}else if（ychan==4）{
变量y=y-2
}否则{
变量y=y
}
var hig=y
while（hig！=c.高度）{
ctx.fillStyle=“rgba（“+0+”、“+255+”、“+0+”、“+（255/255）+”）；
ctx.fillRect（x，hig，1，1）；
var hig=hig+1
}
var widd=widd+1
变量x=x+1
}
var endheight=y
var runnin=runnin+1
document.getElementById（'canvasite'）.setAttribute（'id'，'nAn'））
}

没关系，我通过主画布将所有图像组合在一起解决了这个问题

var-granmoe=0；
var hai=5；
var-runnin=0；
while（runnin！=hai）{
var can=document.createElement（“画布”）；
can.id=“画布”
can.style=“宽度：150px；高度：100px；显示：无
document.body.appendChild（can）；
c=document.getElementById（'canvasite'），
ctx=c.getContext（'2d'）；
变量x=0
如果（runnin==0）{
var endheight=c.height/2
}
var y=末端高度；
var widd=0
while（widd！=c.宽度）{
ctx.fillStyle=“rgba（“+0+”、“+255+”、“+0+”、“+（255/255）+”）；
ctx.fillRect（x，y，1，1）；
var ychan=数学地板（（数学随机（）*6）+1）；
if（ychan==1）{
变量y=y+2
}else if（ychan==2）{
变量y=y+1
}else if（ychan==3）{
变量y=y-1
}else if（ychan==4）{
变量y=y-2
}否则{
变量y=y
}
var hig=y
while（hig！=c.高度）{
ctx.fillStyle=“rgba（“+0+”、“+255+”、“+0+”、“+（255/255）+”）；
ctx.fillRect（x，hig，1，1）；
var hig=hig+1
}
var widd=widd+1
变量x=x+1
}
{
var endheight=y
var runnin=runnin+1
document.getElementById（'canvasite'）.setAttribute（'id'，'nAn'））
var imgm=document.createElement（“img”）；
imgm.src=c.toDataURL（）；
imgm.id=“imageitem”
imgm.style=“显示：无；”
document.body.appendChild（imgm）
var xid=granmoe*（300*（1/hai））；
if（granmoe==0）{
var cansfoo=document.createElement（“画布”）
cansfoo.id=“fullimage”；
cansfoo.style='width:'+（hai*150）+'px；高度：75px；显示：无；'
文件.正文.附件（cansfoo）；
}
var ci=document.getElementById（“fullimage”）；
var ctxi=ci.getContext（“2d”）；
var imd=document.getElementById（“imageitem”）；
ctxi.drawImage（imd，xid，0，（300*（1/hai）），180）；
//结束
var granmoe=granmoe+1
document.getElementById（“imageitem”）.setAttribute（'id'，'non'）；
}
}
var base64=ci.toDataURL（）；
var bass=document.createElement（“img”）；
bass.src=base64
bass.id=“resiz”
bass.style=“显示：无；”
document.body.appendChild（bass）；
{
var resize=document.createElement（“画布”）
resize.id=“resize”；
resize.style='宽度：'+（hai*150）+'px；高度：'+（hai*150）/2++'px；边框：1px实心；'
document.body.appendChild（调整大小）；
var re=document.getElementById（“调整大小”）；
var res=re.getContext（“2d”）；
var imag=document.getElementById（“resiz”）；
res.drawImage（图像，0,50300,50）；
}