HTML5 Game - Set the Width and Height for a Canvas Element

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

Description

Set the Width and Height for a Canvas Element

Demo

ResultView the demo in separate window 

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Canvas Demo</title> 
        <style> 
canvas { /*w w  w .j a v a  2s  .  c  o  m*/
  border: 1px solid #000; 
} 
        </style> 
    </head> 
    <body> 
      <canvas id="myCanvas" width="200" height="200"></canvas> 
      <script> 
let myCanvas = document.getElementById('myCanvas'); 
let myContext = myCanvas.getContext('2d'); 
myContext.moveTo(0, 0); 
myContext.lineTo(200, 200); 
myContext.strokeStyle = '#000'; 
myContext.stroke(); 
      </script> 
    </body> 
</html>

You can set dimensions to the canvas element using the width and height properties.

Related Topic