HTML Canvas Full Screen

by

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

More Related Contents:

  1. How do I add a simple onClick event handler to a canvas element?
  2. How To Save Canvas As An Image With canvas.toDataURL()?
  3. How to add image to canvas
  4. Simulation background-size: cover in canvas
  5. HTML5 Canvas to PNG File
  6. Cross-origin data in HTML5 canvas
  7. Uploading ‘canvas’ image data to the server
  8. HTML5 Canvas drawImage ratio bug iOS
  9. How to save image from canvas with CSS filters
  10. HTML5 canvas ctx.fillText won’t do line breaks?
  11. Is it possible to programmatically detect size limit for data url?
  12. What is the current state of the art in HTML canvas JavaScript libraries and frameworks? [closed]
  13. HTML2canvas generates Blurry images
  14. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  15. Using Canvas to animate a sorting algorithm in JS
  16. Detect if user clicks inside a circle
  17. Why does HTML Canvas getImageData() not return the exact same values that were just set?
  18. Javascript function to Rotate a base 64 image by X degrees and return new base64
  19. Drawing rotated text on a HTML5 canvas
  20. canvas.toDataURL() Security Error The operation is insecure
  21. HTML5 Canvas Circle Text
  22. HTML5 Dynamically create Canvas
  23. Snap edges of objects to each other and prevent overlap
  24. Image Manipulation – add image with corners in exact positions
  25. HTML5 Canvas translate(0.5,0.5) not fixing line blurryness
  26. Scaling an image to fit on canvas
  27. Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
  28. Update HTML5 canvas rectangle on hover?
  29. how to animate drawing lines on canvas
  30. True Isometric Projection with HTML5 Canvas

Leave a Comment