Canvas sur fenêtre entière

Soyez le premier à donner votre avis sur cette source.

Vue 1 936 fois - Téléchargée 187 fois

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 ...

Codes Sources

A voir également

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.