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 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    37
    Thanks
    5
    Thanked 0 Times in 0 Posts

    debugging canvas.

    Hi!,

    I am an javascript programmer, but beginner at working with the canvas API.

    So I made an canvas with multiple images, not only in the viewport but also outside of the canvas.
    I want to debug it, check how much pixels they are out of screen etc.

    So I thougt I can convert the canvas to png/jpg. to see how big it is and how much extra pixels they use.

    I tried but failed:
    Uncaught TypeError: Object #<CanvasRenderingContext2D> has no method 'toDataURL'
    Code:
    Code:
        canvasFrame = document.getElementById('imageFrame');
        canvas = canvasFrame.getContext('2d');
    yepnope("image-editor.js");
    var img = game.canvas.toDataURL("image/png");
    document.write('<img src="'+img+'"/>');
    An other option is to select al the images in the canvas and move it a couple of pixels to determinite the location of them. But I don't know how?

    thanks anyway

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    As the error message indicates, toDataURL doesn't apply to the 2d rendering object, but to the canvas itself - which you've called canvasFrame:

    Code:
    canvasFrame.toDataURL("image/png");
    (It's the only significant method that actually applies directly to the canvas.)

    BTW game.canvas looks wrong to me - you already have a direct reference to your variable 'canvas'; but perhaps you've named something else 'game.canvas'.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New Coder
    Join Date
    Aug 2012
    Posts
    37
    Thanks
    5
    Thanked 0 Times in 0 Posts
    It works thankss!

    But it only show's whats in screen/on viewport.

    I want to see the whole canvas, even if it doesn't fit in the canvas.
    Any options?

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Afaik (and would not be offended if I was proven wrong) the canvas is represented by its width and height (which is exactly what is visible on screen unless you cover parts of it with another element). The parts you paint outside of those borders are not part of the canvas and will never be taken into account, neither by toDataURL nor by getImageData. This is due to the fact that a canvas is a raster type of element. The "objects" drawn on the canvas are only sets of pixels. Pixels that would end up outside of the canvas will never exist.


  •  

    Posting Permissions

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