HTML- Canvas element increase size, but keep content the same size

Question

I am creating a canvas thing to create simple heightmaps for a 2d game that I am making. At the regular canvas size (150px*300px), it appears normal, but if I wanted to scale the canvas up (for bigger maps) and keep the sizes of the interior content the same size, what I am currently doing is not working.

My code is here:

<body>
<script>
var hai = 1; //World width. I was tinkering with this to make the result that I wanted, but at the end, the entire heigtmap needs to be exported via base64 url. 5 canvas' right next to eachother LOOKS like what I want, but I can't get a base64 url for all 5 together, only one.
var runnin = 0;
while(runnin != hai){
var can = document.createElement("canvas");
can.id = "canvasite"
can.style = "width: 150px; height: 75px;"
document.body.appendChild(can);
c = document.getElementById('canvasite'),
    ctx = c.getContext('2d');
    var x = 0
    if(runnin == 0){
var endheight = c.height/2
}
    var y = endheight;
var widd = 0
while(widd != c.width){
    ctx.fillStyle = "rgba("+0+","+255+","+0+","+(255/255)+")";
ctx.fillRect( x, y, 1, 1 );
var ychan = Math.floor((Math.random() * 6) + 1);
if(ychan == 1){
var y=y+2
}else if(ychan == 2){
var y=y+1
}else if(ychan == 3){
var y=y-1
}else if(ychan == 4){
var y=y-2
}else{
var y=y
}
var hig = y
while(hig != c.height){
    ctx.fillStyle = "rgba("+0+","+255+","+0+","+(255/255)+")";
ctx.fillRect( x, hig, 1, 1 );
var hig = hig+1
}
var widd = widd+1
var x=x+1
}
var endheight = y
var runnin = runnin+1
document.getElementById('canvasite').setAttribute('id','nAn')
}
</script>
</body>

As I say in it, it gives half of what I want. It does give a long heightmap, but I cant get a base64 url from it.

To sum all that up, what I tried doesn't allow me to have a complete base64 url, and can I get the same thing if the world width is 3, but in 1 canvas, so I can get a base64 url from it?

Thanks in advance, Athdot.

EDIT: I am a basic programmer, if there are any mistakes in my code, please tell me

score 0 · Answer 1 · answered Apr 20 '17 at 15:51

Nevermind, I solved it by having a master canvas combine all the images together.

<body>
<script>
var granmoe = 0;
var hai = 5;
var runnin = 0;
while(runnin != hai){
 var can = document.createElement("canvas");
 can.id = "canvasite"
 can.style = "width: 150px; height: 100px; display:none;"
 document.body.appendChild(can);
 c = document.getElementById('canvasite'),
    ctx = c.getContext('2d');
    var x = 0
    if(runnin == 0){
  var endheight = c.height/2
 }
    var y = endheight;
 var widd = 0
 while(widd != c.width){
     ctx.fillStyle = "rgba("+0+","+255+","+0+","+(255/255)+")";
  ctx.fillRect( x, y, 1, 1 );
  var ychan = Math.floor((Math.random() * 6) + 1);
  if(ychan == 1){
   var y=y+2
  }else if(ychan == 2){
   var y=y+1
  }else if(ychan == 3){
   var y=y-1
  }else if(ychan == 4){
   var y=y-2
  }else{
   var y=y
  }
  var hig = y
  while(hig != c.height){
      ctx.fillStyle = "rgba("+0+","+255+","+0+","+(255/255)+")";
   ctx.fillRect( x, hig, 1, 1 );
   var hig = hig+1
  }
  var widd = widd+1
  var 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 = "display:none;"
 document.body.appendChild(imgm)
 var xid = granmoe*(300*(1/hai));
 if(granmoe == 0){
  var cansfoo = document.createElement("canvas")
  cansfoo.id = "fullimage";
  cansfoo.style = 'width: '+(hai*150)+'px; height: 75px; display: none;'
  document.body.appendChild(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);
 //end
 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 = "display:none;"
document.body.appendChild(bass);
{
  var resize = document.createElement("canvas")
  resize.id = "resize";
  resize.style = 'width: '+(hai*150)+'px; height: '+(hai*150)/2+'px; border: 1px solid;'
  document.body.appendChild(resize);
 var re=document.getElementById("resize");
 var res=re.getContext("2d");
     var imag=document.getElementById("resiz");
 res.drawImage(imag,0,50,300,50);
    }
</script>
</body>

HTML- Canvas element increase size, but keep content the same size

1 Answers1