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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 28
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Background image in canvas

    I found a great little starfield script made with javascript and canvas3d.
    however i can't for the life of me figure out how to implement a background image inside the canvas. is there some command that tells it to use some feature of canvas, that if otherwise not called, won't allow normal graphics? his whole starfield is generated with a search engine form , and appears to just use a text period to represent stars. here's a link to his script:
    http://seb.ly/demos/canvas3d/canvas3d2.html

    how do i get a background image in that? or is it impossible?

    i tried putting it in the body tag, but it just flashed the background image on the screen for a half a second and then went back to showing only the black background. i tried removing the background body color and replacing it with only background-image ccs, same problem. i tried div positioning it, but the div just covered up the starfield.
    Last edited by undoo; 04-07-2012 at 08:43 PM.

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Posts
    120
    Thanks
    1
    Thanked 15 Times in 15 Posts
    I feel silly saying this, but have you tried styling it?

    Code:
    <canvas id="myCanvas" style="height:200px; width:200px; background:green"/>
    Code:
    c.fillStyle="rgb(0,0,0)";
    would need to be

    Code:
    c.fillStyle="rgba(0, 0, 0, 0)";
    c.clearRect ( 0 , 0 , SCREEN_WIDTH, SCREEN_HEIGHT);
    if I understand your code correctly
    Last edited by M.Jackson; 04-08-2012 at 12:32 AM. Reason: more code

  • #3
    Regular Coder
    Join Date
    Aug 2011
    Posts
    120
    Thanks
    1
    Thanked 15 Times in 15 Posts
    Well, now I feel like an idiot...

    What your code is doing is drawing a solid color as its first step for every frame, where what you need to do is clear the draw surface. So replace :

    Code:
    c.fillStyle="rgba(0,0,0,0)";
    c.fillRect(0,0, SCREEN_WIDTH, SCREEN_HEIGHT);
    on or about line 42-43 with

    Code:
    c.clearRect ( 0 , 0 , SCREEN_WIDTH, SCREEN_HEIGHT);

  • #4
    New Coder
    Join Date
    Mar 2012
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by M.Jackson View Post
    I feel silly saying this, but have you tried styling it?

    Code:
    <canvas id="myCanvas" style="height:200px; width:200px; background:green"/>
    Code:
    c.fillStyle="rgb(0,0,0)";
    would need to be

    Code:
    c.fillStyle="rgba(0, 0, 0, 0)";
    if I understand your code correctly
    well unfortunately, i think canvas handles the word "images" differently than css or javascript. it's odd. i guess cause it allows you to manipulate it in 3d etc that it loses its original, familar syntax. cause styling it in the canvas tag and changing the fill messed it up big time lol it was just a huge blob of white stretching out all over the screen.

  • #5
    New Coder
    Join Date
    Mar 2012
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by M.Jackson View Post
    Well, now I feel like an idiot...

    What your code is doing is drawing a solid color as its first step for every frame, where what you need to do is clear the draw surface. So replace :

    Code:
    c.fillStyle="rgba(0,0,0,0)";
    c.fillRect(0,0, SCREEN_WIDTH, SCREEN_HEIGHT);
    on or about line 42-43 with

    Code:
    c.clearRect ( 0 , 0 , SCREEN_WIDTH, SCREEN_HEIGHT);
    and put the "image" syntax where and in what wording? cause if you look at the canvas tag, there are no semi-colons.

  • #6
    New Coder
    Join Date
    Mar 2012
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    oh nevermind, i got it. well that's interesting. i already have a transparent div over top of the image, to create a "viewport" for a space ship. the background image did show up, but it became semi transparent and glued itself to the transparent div, so that all the animating stars, appeared behind it. was verrrry strange

  • #7
    Regular Coder
    Join Date
    Aug 2011
    Posts
    120
    Thanks
    1
    Thanked 15 Times in 15 Posts
    Style it like you would any other element...

    Code:
    <canvas id="Canvas2D" width="600" height="300" style="background-image:url('apophysis-081023-101detail.jpg');">Internet Explorer Not Supported :(</canvas>
    Because of the way your script works, you have to keep height and width specified as they are. Otherwise, it's just a normal DOM element.

  • #8
    New Coder
    Join Date
    Mar 2012
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by M.Jackson View Post
    Style it like you would any other element...

    Code:
    <canvas id="Canvas2D" width="600" height="300" style="background-image:url('apophysis-081023-101detail.jpg');">Internet Explorer Not Supported :(</canvas>
    Because of the way your script works, you have to keep height and width specified as they are. Otherwise, it's just a normal DOM element.
    oh. well it's not going to work the way it is now. see, i need a div overlay that's semi transparent to create the "window" of the space ship, for the starfield to animate in. the background image, however, is stuck to the semi transparent space ship window, now, and has the appearance of a windshield a very colorful space background windshield. lol the stars are hitting it like bugs hitting a windshield. cool effect, for something else tho!

  • #9
    Regular Coder
    Join Date
    Aug 2011
    Posts
    120
    Thanks
    1
    Thanked 15 Times in 15 Posts
    Ah! You want a black background moving star-field with an image over the top of the stars... got you. I thought you were going for some nebula or something of the sort. 2 ways to do this.

    The first is to layer a div over the top of your canvas, but that's a bit sloppy.

    The clean way is to do this is to keep it all in the canvas. Directly after the stars are drawn, issue a second draw with your image.

    Both of these require that you use an image format with an alpha channel, so that pretty much sticks you with png, or svg.

  • #10
    New Coder
    Join Date
    Mar 2012
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by M.Jackson View Post
    Ah! You want a black background moving star-field with an image over the top of the stars... got you. I thought you were going for some nebula or something of the sort. 2 ways to do this.

    The first is to layer a div over the top of your canvas, but that's a bit sloppy.

    The clean way is to do this is to keep it all in the canvas. Directly after the stars are drawn, issue a second draw with your image.

    Both of these require that you use an image format with an alpha channel, so that pretty much sticks you with png, or svg.
    lol oh boy. well that's what i did. i put the ship window in a div over top of the canvas. the end result was, that the nebula background that you taught me how to put in, became semi transparent as well (which it should i guess?) and stuck to the transparent div overlay, like some car windshield. it was an interesting effect. couldn't have done it on purpose! lol

    now that i think about it, i could use that effect... just get a background with the colors of the inside of the ship reflecting on it. would make it look like the inside of the ship was reflecting off the glass of the window. woo.
    Last edited by undoo; 04-08-2012 at 01:26 AM.

  • #11
    Regular Coder
    Join Date
    Aug 2011
    Posts
    120
    Thanks
    1
    Thanked 15 Times in 15 Posts
    I think I see what you are meaning. The thing is that the overlay itself should not have any opacity set in HTML or CSS, that has to be dealt with by the alpha channel within the image itself. Then again, I may have completely the wrong idea of what you are saying.

  • #12
    New Coder
    Join Date
    Mar 2012
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by M.Jackson View Post
    I think I see what you are meaning. The thing is that the overlay itself should not have any opacity set in HTML or CSS, that has to be dealt with by the alpha channel within the image itself. Then again, I may have completely the wrong idea of what you are saying.
    i only had the background in the canvas tag.
    the foreground (et.al the semi-transparent ship window), was in one of those watermark background image things that makes the background image stick to the window no matter where you scroll it to. this
    Code:
    <script language="JavaScript1.2">
    
    /*
    Watermark Backgound Image Script- © Dynamic Drive (www.dynamicdrive.com)
    For full source code, 100's more DHTML scripts, and TOS,
    visit dynamicdrive.com
    */
    
    if (document.all||document.getElementById)
    document.body.style.background="url('notebook.jpg') white center no-repeat fixed"
    
    </script>
    the end result was that both the overlay of the ship window, and the background image in the canvas tag, were glued to the background, both as semi transparent divs! like i said, i couldn't have done that on purpose! lol weird mistakes sometimes equal unique discoveries.

    the overlay was just a cheapo transparent gif, so when i put the background in, it made all the uneven edges of the transparent gif that had been hidden by the black background color of the original starfield, all show up, ragged and messy, because the background image, was a pretty nebula like you guessed, with blues and pinks and greens and violets and aquas and yellows, much brighter than the ship window or the original starfield.

    so you say i should put both the overlay and the background inside the canvas tag?

  • #13
    Regular Coder
    Join Date
    Aug 2011
    Posts
    120
    Thanks
    1
    Thanked 15 Times in 15 Posts
    Basically, what you are describing as your goal is a very basic game render engine.

    The way these typically work is that you make the whole thing an object and draw the frame in stages.

    Code:
    var viewport = {
    canvasEle:document.getElementById('whatever'),
    viewHeight:300,
    viewWidth:600,
    
    //whatever else you need...then
    
    backgroundImage:"someImage.png",
    guiLayer:"someOtherImage.png",
    drawBackground:function(){
    //fill the viewport with this.backgroundImage
    },
    render:function(){
    //draw your stars
    },
    drawGUI:function(){
    //fill the viewport with this.guiLayer
    },
    drawFrame:function(){
    //first clear the viewport, then...
    this.drawBackground();
    this.render();
    this.drawGUI();
    }
    }
    That structure, filled in the the correct code, will simplify your life greatly as it is modular and can easily be extended for more functionality without going back to the drawing-board.

  • #14
    New Coder
    Join Date
    Mar 2012
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by M.Jackson View Post
    Basically, what you are describing as your goal is a very basic game render engine.

    The way these typically work is that you make the whole thing an object and draw the frame in stages.

    Code:
    var viewport = {
    canvasEle:document.getElementById('whatever'),
    viewHeight:300,
    viewWidth:600,
    
    //whatever else you need...then
    
    backgroundImage:"someImage.png",
    guiLayer:"someOtherImage.png",
    drawBackground:function(){
    //fill the viewport with this.backgroundImage
    },
    render:function(){
    //draw your stars
    },
    drawGUI:function(){
    //fill the viewport with this.guiLayer
    },
    drawFrame:function(){
    //first clear the viewport, then...
    this.drawBackground();
    this.render();
    this.drawGUI();
    }
    }
    That structure, filled in the the correct code, will simplify your life greatly as it is modular and can easily be extended for more functionality without going back to the drawing-board.
    i like modular!
    i haven't worked with pngs at all. i'm behind the times. my daughter took one look at the interior of my space ship and said, and i quote: "that looks like it came right out of the 70's" (as in the 1970s) lol .

    i tried to get her to explain and the best she could do is say, she hoped that wasn't going to be in the game and that new games, even browser based games, were much more professional looking these days.

    i guess she was not saying it was retro in a stylish way. hehe

  • #15
    Regular Coder
    Join Date
    Aug 2011
    Posts
    120
    Thanks
    1
    Thanked 15 Times in 15 Posts
    Ok, so let be brush you up a bit.

    bmp is just a bitmap, one byte for every pixel.
    jpg, is compressed, I really don't know this standard very well.
    gif, uncompressed, but allows for animated images
    png, is the first to use alpha/transparency data

    svg, scalable vector graphic...totally different.
    It stores the logic of how to draw the image, and is thus its size is variable based on complexity, not resolution. These are best used in HTML with the "object" tag.

    Retro style games benefit from simple svg images since svg works by drawing shapes and filling them with a color or gradient.

    You can create svg files with inkscape and png files with gimp. The style that you seem to be going for should be easy to achieve without looking un-professional.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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