Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Southern Oregon
    Thanked 1 Time in 1 Post

    canvas drawing aspect ratio?

    I have been getting my feet wet with using javascript to draw to canvas

    The first thing I noticed is that if I draw a rectangle to a canvas element,
    the height and width of the rectangle does not take on literal display
    dimensions. It appears to inherit some other aspect ratio. Is that an
    inborn characteristic, or is it the result of how the canvas element is
    displayed with css rule set?
    I have a wrapper element for the canvas element that is given a
    fixed width and positioned with margin:0 auto; and text-align:center
    Then the canvas element is given absolute positioning.
    In code I assign width and height to the canvas element.
    The 'feature' appears when I assign different dimensions to the canvas
    element and the same dimension to a rectangle drawn with context.fillRect().

    Initially I am working in Firefox, but have also viewed it in Safari.

    The second thing I noticed is the clearRect will only clear a fillRect and not
    a strokeRect. I do not yet have a manual text that lists all the usable methods and properties,
    so is there a method for creating a simple rectangle with both
    a fill and a stroke that can be cleared?
    I am trying to animate the rectangle by getting it move across the canvas element.
    I have to call clearRect on each shift. (other wise it creates a stack
    of rectangles). I cannot clear stroke rect, and so cannot use it in the animation

  2. #2
    Regular Coder
    Join Date
    Jan 2013
    Thanked 77 Times in 77 Posts
    The aspect ratio issue is something you should be able to search on the internet, for example this might be helpful.

    I'm not too experienced with the canvas element yet, but for all I know, clearRect should clear stroked rectangles too. I could imagine that the stroke is put outside the actual rectangle, so if you try to clear a rectangle of the same size, the stroke is not within the area that will be cleared. Did you try clearing a much bigger area than your actual rectangle to see if it still stays visible?

    A general comment: Please note that direct manipulations can become slow quickly. There's a number of methods to improve performance, for example multiple canvas elements, off-screen rendering,

  3. Users who have thanked Airblader for this post:

    anotherJEK (03-23-2013)

  4. #3
    Regular Coder
    Join Date
    Aug 2010
    Southern Oregon
    Thanked 1 Time in 1 Post

    solved to a degree

    For those who have a similar question and want some guidance
    I found a post about this issue and the recommendation was to
    set both the canvas element height and width literally, assign
    an initial css rule to to dictate the height and width, and set the
    height and width with javascript using the setAttribute() method
    for canvas element height and width.
    The post specified a default of 94 for width and 120 for height,
    but I failed to see the rationale. It did state that the default
    canvas element size (without css rules and/or height and width
    attributes set) is 300/150 (w/h), which is what I was dealing with.

    It also mentioned that IE wants to see the canvas element height and width
    attributes set literally.

    So all scaling is relative to this initial set of values.


Posting Permissions

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