Canvas How to - Change canvas width and height








Question

We would like to know how to change canvas width and height.

Answer


<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function zoom(){<!--  w  w w .j  a  v  a2  s. c o  m-->
    var testcanvas = document.getElementById("canvas");
    testcanvas.width *=1.25;
    testcanvas.height *= 1.25;
}
</script>
  <input type="button" value="zoom" onClick="zoom()" />
  <div class="main">
    <canvas id="canvas" style="background: #ff0000;"></canvas>
  </div>
</body>
</html>

The code above is rendered as follows: