Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How do I give my canvas a colored background?

    Looking at the W3C canvas documentation, I don't see a way to color the background of a canvas, other than to do a fillRect() over the entire surface.

    Is that the proper way to do it or am I missing something?

    (P.S. Making a simple space shooter game.)

  • #2
    Regular Coder
    Join Date
    Aug 2012
    Posts
    116
    Thanks
    0
    Thanked 25 Times in 25 Posts
    Hi Somethingfunny,

    For the background color of the canvas, couldn't you just treat it as though it were the background of a html page:

    Code:
    <!DOCTYPE html>
    <html>
    <style type="text/css">
    canvas{background:lavender;} /*Style for background or...*/
    </style>
    <body>
    
    <canvas id="myCanvas" style="border:1px solid #000000;">
    Your browser does not support the HTML5 canvas tag.
    </canvas>
    
    <script type="text/javascript">
    
    var setup = function(){
    var x = document.getElementById('myCanvas');
    x.width = window.innerWidth;
    x.height = window.innerHeight;
    x.style.background='lavender';/*...background color here*/
    
    }
    setup();
    </script>
    
    </body>
    </html>
    hope this helps
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •