canvas scale trouble with css3

Question

My code contains a div that is 85% of the view-port and it holds a canvas. I have currently made the canvas scroll-able on-click but for some reason anytime I call canvas.style.transform = "scale(2,2)"; the canvas remains the same size. Any help?

EDIT - i was making the call to scale in the scaleUp() function

<!--Div to view, div to zoom, div to translate -->
<div id="view-translate" style="height:85vh; background-color:#f2f2f2; overflow:hidden; ">
 <canvas id="ctx" height="4000" width="4000" oncontextmenu="return false;" style="background-color:#ffffff;"></canvas>
</div>

<p id="text"></p>
<button onclick="scaleUp()">yes</button>

<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>

<script>
 //NETWORK VARIABLES
 var socket = io();
 //GETTING HTML ITEMS BY ID
 var tran = document.getElementById("view-translate");
 
 var canvas = document.getElementById("ctx");
 ctx = canvas.getContext("2d");

 
 //canvas.style.transform = "scale(2,2)";
 //canvas.style.transform = "translate(0px,0px)"; 
 
 
 var tx = 0,//release x and y
 ty = 0,
 cx = 0,//click x and y
 cy = 0,
 mx= 0,//move x and y
 my = 0,
 scale = 1,
 draggable = false;
 
 ctx.fillStyle="red";
 ctx.fillRect(0,0,4,4);
 
 function scaleUp(){

  
 }
 
 //GETTING THE MOUSE X AND Y
 function getMousePos(canvas, event){
  var rect = canvas.getBoundingClientRect();
  return {
   x:event.clientX - rect.left,
   y:event.clientY - rect.top
  };
 }
 
 canvas.addEventListener('mousedown', function(event){
  
  var pos = getMousePos(canvas, event);
  
  cx = pos.x;
  cy = pos.y;
  
  if(event.which === 3){
   draggable = true;
   
  }
  
  if(event.which === 1){
   alert(cx + " " + cy);
  }
  
  if(event.which === 2){
  }

 }, false );
 
 tran.addEventListener('mousedown', function(event){
  
  var pos = getMousePos(tran, event);
  
  
  if(event.which === 3){
  }
  
  if(event.which === 1){
  
  }
  
  if(event.which === 2){
  }

 }, false );
 
 tran.addEventListener('mouseup', function(event){
  
  if(event.which === 3){
   draggable = false;
  }
  
  if(event.which === 1){

  }
  
  if(event.which === 2){

  }


 }, false );
 
 tran.addEventListener('mousemove', function(event){
  
  var pos = getMousePos(tran, event);
  mx = pos.x;
  my = pos.y;
  
  document.getElementById("text").innerHTML = mx + ", " + my + " size:" + canvas.height + " " + canvas.width;
  
  if(draggable){
   tx = mx - cx;
   ty = my - cy;
   
   document.getElementById("text").innerHTML = "CLICK!" + tx + ", " + ty;
   
   canvas.style.transform = "translate(" + tx + "px, " + ty + "px)";
  }
 
 }, false);
 
 
 
</script>

</html>

score 1 · Accepted Answer · edited May 23 '17 at 12:10

1

The .scale method for HTML5 Canvas does not actually resize the canvas. All it does is to affect things that will be drawn on the canvas in the future.
This is a good example of how it works https://www.w3schools.com/tags/canvas_scale.asp As you can see, the original rectangle remains the same size but the second one is twice as big.

You need to do directly change the height and width of your canvas. Something like this should do it Resize HTML5 canvas to fit window

edited May 23 '17 at 12:10

Community

1
1

answered Apr 06 '17 at 18:49

borbesaur

681
4
10

So i am using a 4000,4000 canvas that draws 4x4 pixels so it can fit 1000 pixels across, i changed the button to increase the height and the width of canvas as well as the height and width of the rect to 35000x35000 and the rect is 35x35 but when i go that high it doesnt draw the rect, it stops drawing the rect beyond 11000 pixels – Jaekx Apr 06 '17 at 19:19
11,000 or 1,100? Can you include a snippet or something so I can see? Not sure what you mean. – borbesaur Apr 11 '17 at 16:28

canvas scale trouble with css3

1 Answers1