Jump to content

arieplug

Members
  • Posts

    2
  • Joined

  • Last visited

About arieplug

  • Birthday 01/21/1987

arieplug's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. 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,
×
×
  • Create New...