HTML5 Game - Set text base line to top

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Text Drawing

Description

Set text base line to top

Demo

ResultView the demo in separate window 

<!DOCTYPE html>  
<html> 
<head> 
<style> 
#canvas { //from www  .j av a 2 s .c  o  m
  border:1px solid #03F; 
  background:#CFC; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="640" height="480"></canvas> 
<script> 
  let context = document.getElementById('canvas').getContext('2d'); 
        context.fillStyle = '#aaaaaa';
      context.fillRect(0, 0, 200, 200);
    context.fillStyle    = '#000000';
    context.font         = '20px sans-serif';
    context.textBaseline = 'top';
    context.fillText  ("Canvas!", 0, 0);



</script> 



</body> 
</html>

Related Topic