Jump to content

HTML5 Canvas -- color/width changes between strokes


davej

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
Link to comment
Share on other sites

  • 2 weeks later...

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"

Link to comment
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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...