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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    310
    Thanks
    23
    Thanked 0 Times in 0 Posts

    HTML 5 Canvas Background Not Saving

    OK LOL, well, I want to know why when I save a canvas, the background is still transparent when I did give it a background color in CSS?

    My codes was to write on a Canvas. I don't have issues in it. I only have issues about the background which is still transparent after right click on the canvas to save.

    HTML

    Code:
    <canvas id="canvas" width="200" height="200"></canvas>
    <img id="canvassave" alt="Right click to save me!">
    <input type="text" size="25" id="lol"/>
    <input type="button" value="write" onClick="writethecrap();"/>
    CSS

    Code:
    #canvas {
    background:red;
    }
    JavaScript

    Code:
    function writethecrap () {
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var loltext = document.getElementById("lol").value;
        var dataURL = canvas.toDataURL();
    
        document.getElementById('canvassave').src = dataURL;
        context.fillText(loltext, 50, 50);
    }
    Bear in mind, the text is being written, only when I save the Canvas after right-click, the background is not saving. It is transparent.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    This is because the background is not part of the canvas content which will be converted using .toDataURL() but rather part of the style (CSS) of the canvas (just to manipulate its screen appearance). If you want the red background to be part of the canvas, the first thing you should do after initiating the canvas is to fill it with red color.

  • Users who have thanked devnull69 for this post:

    angelali (11-22-2012)

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    310
    Thanks
    23
    Thanked 0 Times in 0 Posts
    How to do it?

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    Code:
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var width = canvas.width;
    var height = canvas.height;
    context.fillStyle='rgb(255,0,0)'; // red
    context.fillRect(0, 0, width, height);

  • Users who have thanked devnull69 for this post:

    angelali (11-22-2012)

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    310
    Thanks
    23
    Thanked 0 Times in 0 Posts
    And suppose I make the background image? How to do it and will it save the background image as well if we do it?

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    I don't understand. Do you have a CSS background-color and a CSS background-image and something (text) in the foreground??

  • Users who have thanked devnull69 for this post:

    angelali (11-22-2012)

  • #7
    Regular Coder
    Join Date
    Sep 2011
    Posts
    310
    Thanks
    23
    Thanked 0 Times in 0 Posts
    The background is color right now. I was asking what if I want a background image now? How to do it? I know the drawimage function only.

  • #8
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    Yes, for a background-image you would need the drawImage method for the canvas. Draw the background-image first and then the foreground.

  • Users who have thanked devnull69 for this post:

    angelali (11-22-2012)

  • #9
    Regular Coder
    Join Date
    Sep 2011
    Posts
    310
    Thanks
    23
    Thanked 0 Times in 0 Posts
    I think its lame. CSS should be accepted! Anyway, thank you!


  •  

    Posting Permissions

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