Canvas sur fenêtre entière

Télécharger le projet
Commenter

Description

Bonjour

Petit code qui montre comment créer un Canvas sur la plus grande place disponible d'une fenêtre (même redimensionnée).
Et sans jamais faire apparaître les barres de défilement (scrollbars). 
<!DOCTYPE html>
<html>
  <head>
    <title>Canvas sur la fenètre entière</title>
    <script>
      var cnv,ctx;

      function Resize() {
        cnv.width=window.innerWidth; cnv.height=window.innerHeight;
        Draw();
      }

      function Draw() { // simple example
        var w=cnv.width,h=cnv.height;
        ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(w,h); ctx.stroke();
        ctx.beginPath(); ctx.moveTo(w,0); ctx.lineTo(0,h); ctx.stroke();
        ctx.fillText('width = '+w+', height = '+h,w/2-64,16);
      }

      function Coords(e) {
        alert('click: X = '+e.clientX+', Y = '+e.clientY);
      }

      function Ini() {
        cnv=document.getElementById('Cnv');
        cnv.onmousedown=Coords;
        ctx=cnv.getContext('2d');
        Resize();
      }
    </script>
  </head>
  <body onload='Ini()' onresize='Resize()'>
    <canvas id='Cnv' style='position:fixed; left:0px; top:0px; background:#FFFF00'>
      canvas not supported
    </canvas>
  </body>
</html>

Lancez le programme, cliquez aux endroits intéressants pour en connaitre les coordonnées, tout en modifiant la taille de la fenêtre.

Testé avec les dernières versions des navigateurs:
Chrome, Firefox, IE, Opera, Safari

Bonne lecture ...
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (William VOIROL)