HTML5 Game - Canvas Element Size vs. Drawing Surface Size

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Canvas Tag

Introduction

Setting element size and drawing surface size to different values

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
   <head>
     <title>Canvas element size: 600 x 300, Canvas drawing surface size: 300 x 150</title>

      <style> 
         body {// w  w w  . j  a v  a2  s.  c o m
            background: #dddddd;
         }

         #canvas {
            margin: 20px;
            padding: 20px;
            background: #ffffff;
            border: thin inset #aaaaaa;
            width: 600px;  /* Sets only the width and height of */
            height: 300px; /* the canvas element, not the drawing surface */
         }
      </style>
   </head>

  <body>
    <canvas id='canvas'>
      Canvas not supported
    </canvas>

    <script>


let canvas = document.getElementById('canvas'),
   context = canvas.getContext('2d');
   
context.font = '38pt Arial';
context.fillStyle = 'cornflowerblue';
context.strokeStyle = 'blue';

context.fillText("Hello Canvas", canvas.width/2 - 150,
                                 canvas.height/2 + 15);

context.strokeText("Hello Canvas", canvas.width/2 - 150,
                                   canvas.height/2 + 15);
      
    </script>
  </body>
</html>

Related Topic