arieplug Posted March 6, 2015 Share Posted March 6, 2015 Hi , i have a problem with clearing the canvas before redrawing the canvas again. <!DOCTYPE html><html> <head> </head><body> <P>colomn</P> <form name="column"> height:<input name="height"type="number" value="100"> <br> </form> <P>beam</P> <form name="beam"> height:<input name="height"type="number" value="100"> <br> </form> <input type="button" onclick="draw()" value="draw"><canvas id="myCanvas" width="500" height="400" style="border:1px solid #d3d3d3;"></canvas><script> function draw(){ var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var centerline_column= 200 var left= centerline_column-0.5*document.forms["column"]["height"].value; var right= centerline_column+0.5*document.forms["column"]["height"].value; var centerline_beam = 200 var top = centerline_beam+0.5*document.forms["beam"]["height"].value; var bottom = centerline_beam-0.5*document.forms["beam"]["height"].value; ctx.clearRect(0,0,500,400); ctx.moveTo(left,350); ctx.lineTo(left,50); ctx.stroke(); ctx.moveTo(right,350); ctx.lineTo(right,50); ctx.stroke(); ctx.moveTo(right,top); ctx.lineTo(450,top); ctx.stroke(); ctx.moveTo(right,bottom); ctx.lineTo(450,bottom); ctx.stroke(); }</script></body></html> If i change the height of the beam to 200 (and click the button) the old canvas is not cleared. can someone help me to create an clean canvas before every redraw? with kind regards, Arie Plug, Link to comment Share on other sites More sharing options...
Ingolme Posted March 7, 2015 Share Posted March 7, 2015 You forgot to call the beginPath() method before drawing a new path. The program remembers all the path commands that you input and draws all of them every time you call the stroke() or fill() methods. In order to clear the memory of old paths you need to call beginPath() when starting to draw. Link to comment Share on other sites More sharing options...
arieplug Posted March 7, 2015 Author Share Posted March 7, 2015 thanks you. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now