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.rotate(Math.PI / 36);
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'));
}