Jump to content
Sign in to follow this  
davej

HTML5 Canvas -- color/width changes between strokes

Recommended Posts

Had some odd results... but I think I fixed it. Are there any remaining problems with this code?

<body><canvas id="canvas" width="500" height="500"></canvas> <script>var canvas = document.getElementById('canvas').getContext('2d');canvas.strokeStyle="#FF0000";//redcanvas.lineWidth=10;canvas.beginPath();canvas.moveTo(10,10);canvas.lineTo(490,490);	  alert('canvas is still blank -- next stroke');canvas.stroke();canvas.strokeStyle="#00FF00";//greencanvas.lineWidth=30;	canvas.beginPath();canvas.moveTo(490,10);canvas.lineTo(10,490);	  alert('next stroke');canvas.stroke();canvas.font="35px Verdana";canvas.strokeStyle="#000";canvas.fillStyle="#F00";//redcanvas.lineWidth=1;	  alert('next fillText');canvas.fillText("HTML5 abcABC",50,250); //(string, xStart, yStart)	  alert('next strokeText');canvas.strokeText("HTML5 abcABC",50,250); //(string, xStart, yStart)</script> </body>

Edited by davej

Share this post


Link to post
Share on other sites

I'm still not feeling too certain about the semi-optional almost interchangeable use of beginPath() and closePath()

Share this post


Link to post
Share on other sites

could you please elaborate on your experiment, and what behavior you are experiencing vs. what are expecting to get? here are some links that might helphttp://stackoverflow.com/questions/10807230/what-exactly-is-a-canvas-path-and-what-is-the-use-of-ctx-closepathhttp://www.w3schools.com/tags/canvas_beginpath.asphttp://www.w3schools.com/tags/canvas_closepath.asp It looks the difference with beginPath and closePath is that it "causes the point of the pen to move back to the start of the current subpath,drawing a line from the current point back to that starting point"

Share this post


Link to post
Share on other sites

The issue is that unless you use one of these two commands the line segments you are drawing will all be considered portions of the same line and the latest color or width changes will affect all of them.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...