A canvas resize example



function canvasReady() {
  drawShape(document.getElementById('canvas'));
}
function drawShape(canvas){
  var ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Draw shapes
  ctx.save();
  ctx.fillRect(25,25,100,100);
  ctx.clearRect(45,45,60,60);
  ctx.strokeRect(50,50,50,50);

  ctx.font = "64pt Arial";
  ctx.textBaseline = "top";

  ctx.fillStyle = "orange";
  ctx.fillText("fill", 22, 22);
  ctx.restore();
}
function wide() {
  var e = document.getElementById('canvas');
  e.width = parseInt(e.width) + 10;
  e.height = parseInt(e.height) + 10;
  e.getContext('2d').clearRect(0, 0, e.width, e.height);
}
function reduce() {
  var e = document.getElementById('canvas');
  e.width = parseInt(e.width) - 10;
  e.height = parseInt(e.height) - 10;
  e.getContext('2d').clearRect(0, 0, e.width, e.height);
}
function redraw() {
  drawShape(document.getElementById('canvas'));
}