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 3 of 3
  1. #1
    Ing
    Ing is offline
    New Coder
    Join Date
    Feb 2011
    Location
    Los Angeles
    Posts
    13
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Multiple layers with the Canvas tag

    Hi. I'm writing a script that graphs data in different colors and shapes and I'm encountering two problems:

    (1) I can't specify different colors for the graph I'm rendering. If I use fillStyle="red"; then the entire chart becomes red. It seems to use the last color specified as the color for everything on the chart.

    (2) The shapes are overlapping in strange ways. The fills are not covering the lines of shapes behind them so it's unclear which shape is in front and which is behind. It's like they aren't being treated as separate shapes but instead one shape where boundaries are unclear. I don't know how else to explain it.

    I'm hoping there is some way to put each shape in its own layer. Would I have to use DIV IDs for that or is there a way to keep it all in the script so it's more scalable?
    Last edited by Ing; 02-13-2011 at 11:33 PM. Reason: resolved

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    are you using context.beginPath() to reset the shape drawing?
    checkout https://developer.mozilla.org/en/dra...cs_with_canvas for example of drawing overlapping shapes.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • Users who have thanked rnd me for this post:

    Ing (02-13-2011)

  • #3
    Ing
    Ing is offline
    New Coder
    Join Date
    Feb 2011
    Location
    Los Angeles
    Posts
    13
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rnd me View Post
    are you using context.beginPath() to reset the shape drawing?
    No, I hadn't been. That was the problem causing the overlapping lines!
    Lesson learned: always use cxt.beginPath(); and cxt.closePath();

    And the issue with the multiple colors was just a syntax issue - I had forgotten to use quotations around the color names in my array.

    Thank you.


  •  

    Tags for this Thread

    Posting Permissions

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