HTML Canvas Full Screen

Question

I m playing with the following application using the HTML Canvas  http   driz co uk particles   At the moment it is set to 640x480 pixels  but I would like to make it full screen as it will be shown a projector  However as far as I can tell I cannot set the canvas size to be 100  as the variables only except numbers and not the    Using CSS just stretches it rather than making it actual full screen   Any ideas   EDIT  Tried finding the height and width using jQuery but it breaks the canvas any ideas why   var  j   jQuery noConflict      var canvas  var ctx  var canvasDiv  var outerDiv   var canvasW    j  body   width    var canvasH    j  body   height       var canvasW       640    var canvasH       480   var numMovers     550  var movers            var friction       96  var radCirc       Math PI   2   var mouseX  mouseY  mouseVX  mouseVY  prevMouseX   0  prevMouseY   0     var isMouseDown   true     function init         canvas   document getElementById  mainCanvas         if  canvas getContext                 setup            setInterval  run   33             function setup         outerDiv   document getElementById  outer        canvasDiv   document getElementById  canvasContainer        ctx   canvas getContext  2d         var i   numMovers      while  i--                 var m   new Mover            m x    canvasW    5          m y    canvasH    5          m vX   Math cos i    Math random     25          m vY   Math sin i    Math random     25          m size   2          movers i    m             document onmousedown   onDocMouseDown      document onmouseup     onDocMouseUp      document onmousemove   onDocMouseMove     function run         ctx globalCompositeOperation    source-over       ctx fillStyle    rgba 8 8 12  65        ctx fillRect  0   0   canvasW   canvasH        ctx globalCompositeOperation    lighter        mouseVX      mouseX - prevMouseX      mouseVY      mouseY - prevMouseY      prevMouseX   mouseX      prevMouseY   mouseY       var toDist     canvasW   1 15      var stirDist   canvasW   8      var blowDist   canvasW   2       var Mrnd     Math random      var Mabs     Math abs      var Msqrt    Math sqrt      var Mcos     Math cos      var Msin     Math sin      var Matan2   Math atan2      var Mmax     Math max      var Mmin     Math min       var i   numMovers      while  i--                 var m    movers i           var x    m x          var y    m y          var vX   m vX          var vY   m vY           var dX   x - mouseX          var dY   y - mouseY           var d   Msqrt  dX   dX   dY   dY            var a   Matan2  dY   dX            var cosA   Mcos  a            var sinA   Msin  a             if  isMouseDown                         if  d  lt  blowDist                                 var blowAcc     1 -   d   blowDist       2                  vX    cosA   blowAcc    5 - Mrnd                    vY    sinA   blowAcc    5 - Mrnd                                     if  d  lt  toDist                         var toAcc     1 -   d   toDist       canvasW    0014              vX -  cosA   toAcc              vY -  sinA   toAcc                     if  d  lt  stirDist                         var mAcc     1 -   d   stirDist       canvasW    00022              vX    mouseVX   mAcc              vY    mouseVY   mAcc                                 vX    friction          vY    friction           var avgVX   Mabs  vX            var avgVY   Mabs  vY            var avgV     avgVX   avgVY      5           if  avgVX  lt   1   vX    Mrnd     3          if  avgVY  lt   1   vY    Mrnd     3           var sc   avgV    45          sc   Mmax  Mmin  sc   3 5      4              var nextX   x   vX          var nextY   y   vY           if  nextX  gt  canvasW                         nextX   canvasW              vX    -1                    else if  nextX  lt  0                         nextX   0              vX    -1                     if  nextY  gt  canvasH                         nextY   canvasH              vY    -1                    else if  nextY  lt  0                         nextY   0              vY    -1                      m vX   vX          m vY   vY          m x    nextX          m y    nextY           ctx fillStyle   m color          ctx beginPath            ctx arc  nextX   nextY   sc   0   radCirc   true            ctx closePath            ctx fill                      rect  ctx   mouseX - 3   mouseY - 3   6   6        function onDocMouseMove  e         var ev   e   e   window event      mouseX   ev clientX - outerDiv offsetLeft - canvasDiv offsetLeft      mouseY   ev clientY - outerDiv offsetTop  - canvasDiv offsetTop     function onDocMouseDown  e         isMouseDown   true      return false     function onDocMouseUp  e         isMouseDown   true      return false                                                                                                       function Mover         this color    rgb     Math floor  Math random   255           Math floor  Math random   255           Math floor  Math random   255              this y       0      this x       0      this vX      0      this vY      0      this size    0                                                                                                       function rect  context   x   y   w   h          context beginPath        context rect  x   y   w   h        context closePath        context fill

User · Answer

it s simple  set canvas width and height to screen width and screen height  then press F11  think F11 should make full screen in most browsers does in FFox and IE

User · Answer

Because it was not posted yet and is a simple css fix    canvas       position fixed      left 0      top 0      width 100       height 100       Works great if you want to apply a fullscreen canvas background  for example with Granim js

User · Answer

If you want to show it in a presentation then consider using requestFullscreen   method let canvas   document getElementById  quot canvas id quot    canvas requestFullscreen     that should make it fullscreen whatever the current circumstances are  also check the support table https   caniuse com  search requestFullscreen

User · Answer

Get the full width and height of the screen and create a new window set to the appropriate width and height  and with everything disabled  Create a canvas inside of that new window  setting the width and height of the canvas to the width - 10px and the height - 20px  to allow for the bar and the edges of the window    Then work your magic on that canvas

User · Answer

On document load set the   canvas width   window innerWidth  canvas height   window innerHeight

User · Answer

All you need to do is set the width and height attributes to be the size of the canvas  dynamically  So you use CSS to make it stretch over the entire browser window  then you have a little function in javascript which measures the width and height  and assigns them  I m not terribly familliar with jQuery  so consider this psuedocode   window onload   window onresize   function       theCanvas width   theCanvas offsetWidth    theCanvas height   theCanvas offsetHeight      The width and height attributes of the element determine how many pixels it uses in it s internal rendering buffer  Changing those to new numbers causes the canvas to reinitialise with a differently sized  blank buffer  Browser will only stretch the graphics if the width and height attributes disagree with the actual real world pixel width and height

User · Answer

The newest Chrome and Firefox support a fullscreen API  but setting to fullscreen is like a window resize  Listen to the onresize-Event of the window-object     window  bind  resize   function        var w     window  width        var h     window  height             mycanvas   css  width   w    px            mycanvas   css  height   h    px            using HTML5 for fullscreen  only newest Chrome   FF      mycanvas   0  webkitRequestFullScreen Element ALLOW KEYBOARD INPUT     Chrome     mycanvas   0  mozRequestFullScreen      Firefox           now i want to cancel fullscreen document webkitCancelFullScreen      Chrome document mozCancelFullScreen      Firefox   This doesn t work in every browser  You should check if the functions exist or it will throw an js-error    for more info on html5-fullscreen check this  http   updates html5rocks com 2011 10 Let-Your-Content-Do-the-Talking-Fullscreen-API

User · Answer

Well  I was looking to make my canvas fullscreen too  This is how i did it  I ll post the entire index html since I am not a CSS expert yet    basically just using position fixed and width and height as 100  and top and left as 0  and i nested this CSS code for every tag  I also have min-height and min-width as 100   When I tried it with a 1px border the border size was changing as I zoomed in and out but the canvas remained fullscreen     x000D   x000D   lt  DOCTYPE html gt  x000D   lt html style  position fixed min-height 100  min-width 100  height 100  width 100  top 0  left 0  resize none   gt  x000D   lt head gt  x000D   lt title gt MOUSEOVER lt  title gt  x000D   lt script  text javascript  src  main js  gt  lt  script gt  x000D   x000D   lt  head gt  x000D   x000D   x000D   lt body id  BODY CONTAINER  style  position fixed min-height 100  min-width 100  height 100  width 100  top 0  left 0  resize none   gt  x000D   x000D   x000D   x000D   lt div id  DIV GUI CONTAINER  style  position fixed min-height 100  min-width 100  height 100  width 100  top 0  left 0  resize none   gt  x000D   x000D   lt canvas id  myCanvas   style  position fixed min-height 100  min-width 100  height 100  width 100  top 0  left 0  resize none   gt  x000D   x000D   lt  canvas gt  x000D   x000D   lt  div gt  x000D   x000D   x000D   lt  body gt  x000D   x000D   x000D   lt  html gt  x000D   x000D   x000D    EDIT   add this to the canvas element    x000D   x000D   lt canvas id  myCanvas  width    height    style  position fixed min-height 100  min-width 100  height 100  width 100  top 0  left 0  resize none   gt  x000D   x000D   lt  canvas gt  x000D   x000D   x000D    add this to the javascript  canvas width   window screen width   canvas height   window screen height   I found this made the drawing a lot smoother than my original comment   Thanks

User · Answer

A - How To Calculate Full Screen Width   Height  Here is the functions   canvas width   window innerWidth    document documentElement clientWidth    document body clientWidth  canvas height   window innerHeight    document documentElement clientHeight    document body clientHeight    Check this out  B - How To Make Full Screen Stable With Resize  Here is the resize method for the resize event   function resizeCanvas         canvas width   window innerWidth    document documentElement clientWidth    document body clientWidth      canvas height   window innerHeight    document documentElement clientHeight    document body clientHeight       WIDTH   canvas width      HEIGHT   canvas height       clearScreen        C - How To Get Rid Of Scroll Bars  Simply    lt style gt      html  body           overflow  hidden         lt  style gt    D - Demo Code   x000D   x000D   lt html gt  x000D    lt head gt  x000D     lt title gt Full Screen Canvas Example lt  title gt  x000D     lt style gt  x000D     html  body   x000D      overflow  hidden  x000D       x000D     lt  style gt  x000D    lt  head gt  x000D    lt body onresize  resizeCanvas    gt  x000D     lt canvas id  mainCanvas  gt  x000D     lt  canvas gt  x000D     lt script gt  x000D      function      x000D      canvas   document getElementById  mainCanvas    x000D      ctx   canvas getContext  2d    x000D       x000D      canvas width   window innerWidth    document documentElement clientWidth    document body clientWidth  x000D      canvas height   window innerHeight    document documentElement clientHeight    document body clientHeight  x000D      WIDTH   canvas width  x000D      HEIGHT   canvas height  x000D       x000D      clearScreen    x000D           x000D      x000D     function resizeCanvas     x000D      canvas width   window innerWidth    document documentElement clientWidth    document body clientWidth  x000D      canvas height   window innerHeight    document documentElement clientHeight    document body clientHeight  x000D       x000D      WIDTH   canvas width  x000D      HEIGHT   canvas height  x000D       x000D      clearScreen    x000D       x000D      x000D     function clearScreen     x000D      var grd   ctx createLinearGradient 0 0 0 180   x000D      grd addColorStop 0   6666ff    x000D      grd addColorStop 1   aaaacc    x000D   x000D      ctx fillStyle   grd  x000D      ctx fillRect   0  0  WIDTH  HEIGHT    x000D       x000D     lt  script gt  x000D    lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

function resize         canvas width   window innerWidth      canvas height   window innerHeight      render      window addEventListener  resize   resize  false   resize    function render        draw to screen here     https   jsfiddle net jy8k6hfd 2

User · Answer

AFAIK  HTML5 does not provide an API which supports full screen   This question has some view points on making html5 video full screen for example using webkitEnterFullscreen in webkit  Is there a way to make html5 video fullscreen

User · Answer

I hope it will be useful      Get the canvas element var canvas   document getElementById  canvas     var isInFullScreen    document fullscreenElement  amp  amp  document fullscreenElement     null          document webkitFullscreenElement  amp  amp  document webkitFullscreenElement     null          document mozFullScreenElement  amp  amp  document mozFullScreenElement     null          document msFullscreenElement  amp  amp  document msFullscreenElement     null       Enter fullscreen function fullscreen        if canvas RequestFullScreen           canvas RequestFullScreen         else if canvas webkitRequestFullScreen           canvas webkitRequestFullScreen         else if canvas mozRequestFullScreen           canvas mozRequestFullScreen         else if canvas msRequestFullscreen           canvas msRequestFullscreen         else          alert  This browser doesn t supporter fullscreen                Exit fullscreen function exitfullscreen        if  document exitFullscreen            document exitFullscreen          else if  document webkitExitFullscreen            document webkitExitFullscreen          else if  document mozCancelFullScreen            document mozCancelFullScreen          else if  document msExitFullscreen            document msExitFullscreen         else          alert  Exit fullscreen doesn t work

User · Answer

You could just capture window resize events and set the size of your canvas to be the browser s viewport

User · Answer

You can just insert the following in to your main html page  or a function   canvas width   window innerWidth  canvas height   window innerHeight    Then to remove the margins on the page  html  body       margin  0  important      padding  0  important      That should do the job

User · Answer

The javascript has  var canvasW       640  var canvasH       480    in it   Try changing those as well as the css for the canvas   Or better yet  have the initialize function determine the size of the canvas from the css   in response to your edits  change your init function   function init         canvas   document getElementById  mainCanvas        canvas width   document body clientWidth    document width is obsolete     canvas height   document body clientHeight    document height is obsolete     canvasW   canvas width      canvasH   canvas height       if  canvas getContext                 setup            setInterval  run   33              Also remove all the css from the wrappers  that just junks stuff up   You have to edit the js to get rid of them completely though     I was able to get it full screen though   html  body       overflow  hidden      Edit  document width and document height are obsolete  Replace with document body clientWidth and document body clientHeight

[javascript] HTML Canvas Full Screen

Examples related to javascript

Examples related to html

Examples related to canvas