www.webdeveloper.com
Results 1 to 5 of 5

Thread: change colour problem; trivial, I'm sure - but I can't figure it out

Hybrid View

  1. #1
    Join Date
    Oct 2012
    Posts
    11

    change colour problem; trivial, I'm sure - but I can't figure it out

    I simply want to draw two line segments, the first in blue, the second in red:
    Code:
    function testDraw(){
    	context.moveTo(0,0); context.lineTo(myCanvasWidth/2, myCanvasHeight/2);
    	context.strokeStyle = "blue";
    	context.stroke();
    	context.lineTo(myCanvasWidth, 0);
    	context.strokeStyle = "red";
    	context.stroke();
    }
    The problem is that the first blue line segment is gone over again - in red.

    I'm a javascript beginner, and I'm sure this is trivial, but I'd appreciate help nevertheless.
    Thanks.

  2. #2
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    You have to call context.closePath() when you've ended your blue line, and then call context.beginPath() and context.moveTo() again to start your new red line.

    As it is now your red line uses all coordinates from the blue line as well those added after your first stroke(), so it draws the red line above the blue line.

    Code:
    context.beginPath();
    context.moveTo(0,0);
    context.lineTo(myCanvasWidth/2, myCanvasHeight/2);
    context.closePath();
    context.strokeStyle = "blue";
    context.stroke();
    
    context.beginPath();
    context.moveTo(myCanvasWidth/2, myCanvasHeight/2);
    context.lineTo(myCanvasWidth, 0);
    context.closePath();
    context.strokeStyle = "red";
    context.stroke();
    Last edited by ReFreezed; 11-02-2012 at 09:25 AM.

  3. #3
    Join Date
    Oct 2012
    Posts
    11
    Thanks.
    However, I need a way to 'endPath' rather than 'closePath'. The problem with 'closePath()' is that it will create a triangle if I plot three points. How can join three points in one colour, and then join a succession of other points in another colour, without the first three points being made into a closed triangle through the use of 'closePath()'?

  4. #4
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    Oh sorry, my bad. You just need to include the beginPath call to start a new line with a new color. It'll end the old path without "closing" it.
    Code:
    context.beginPath();
    context.moveTo(0,0);
    context.lineTo(myCanvasWidth*0.25, myCanvasHeight*0.5);
    context.lineTo(myCanvasWidth*0.5, myCanvasHeight*0.25);
    context.strokeStyle = "blue";
    context.stroke();
    
    context.beginPath();
    context.moveTo(myCanvasWidth*0.5, myCanvasHeight*0.25);
    context.lineTo(myCanvasWidth*0.75, myCanvasHeight*0.5);
    context.lineTo(myCanvasWidth, 0);
    context.strokeStyle = "red";
    context.stroke();
    Last edited by ReFreezed; 11-03-2012 at 01:35 PM.

  5. #5
    Join Date
    Oct 2012
    Posts
    11
    Thank you!

    That's exactly what I need.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles