Canvas Resize Example

by ryanwfiorini

HTML

<canvas id="gameCanvas" width="300" height="300" class="initialRotation"></canvas>

CSS

#gameCanvas{
    background-color:green;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;

    -ms-transition-property: all;
    -ms-transition-duration: 1s;
    -ms-transition-timing-function: ease;

    -webkit-backface-visibility: visible;
    -webkit-transform-origin-x: 50%;
    -webkit-transform-origin-y: 50%;
    -webkit-transform: perspective(500px) rotateY(150deg);
}
moveRotation
{
    -ms-transform: perspective(500px) rotateY(-90deg) scale(0.1);
    -webkit-transform: perspective(500px) scale(0);
    -moz-transform: perspective(500px) rotateY(-90deg) scale(0.1);
    -o-transform: perspective(500px) scale(0);
}

.initialRotation
{
    -ms-transform: perspective(500px) rotateY(0deg) scale(1);
    -webkit-transform: perspective(500px) scale(1);
    -moz-transform: perspective(500px) rotateY(0deg) scale(1);
    -o-transform: perspective(500px) scale(1);
}

JavaScript

var elem = document.getElementById('gameCanvas');if (elem && elem.getContext) {
  // Get the 2d context.
  // Remember: you can only initialize one context per element.
  var context = elem.getContext('2d');
  if (context) {
    /*context.fillRect(0, 0, 150, 100);


    context.fillStyle   = '#00f'; // blue
    context.strokeStyle = '#f00'; // red
    context.lineWidth   = 4;
    
    // Draw some rectangles.
    context.fillRect  (0,   0, 150, 50);
    context.strokeRect(0,  60, 150, 50);
    context.clearRect (30, 25,  90, 60);
    context.strokeRect(30, 25,  90, 60);*/


    context.fillStyle    = '#00f';
    context.font         = 'italic 30px sans-serif';
    context.textBaseline = 'top';
    context.fillText  ('Hello world!', 0, 0);
    context.font         = 'bold 30px sans-serif';
    context.strokeText('Hello world!', 0, 50);

    context.shadowOffsetX = 5;
    context.shadowOffsetY = 5;
    context.shadowBlur    = 4;
    context.shadowColor   = 'rgba(255, 0, 0, 0.5)';
    context.fillStyle     = '#00f';
    context.fillRect(70, 70, 150, 100);
  }
}