javascript - can not draw anything on my canvas -
same code i've written make canvas drawing board behaving differently .don't know happeded.i have wrote same codes before worked fine not allowing me draw single thing time.what might go wrong ?
<html> <body> <script> var candraw=false; var x,y; var i=0; var radius=10; function canvloder(){ var canvas=document.getelementbyid("mycanv"); canvas.width=500; canvas.height=700; canvas.style.border="1px solid black"; canvas.style.position="absolute"; canvas.style.left="270px"; canvas.style.top="30px"; canvas.style.backgroundcolor="yellow"; canvas.addeventlistener("click",function(e){candraw(e)},false); canvas.addeventlistener("mousemove",function(e){nowdraw(e)},false); canvas.addeventlistener("mouseout",function(e){cannotdraw(e)},false); canvas.addeventlistener("mouseup",function(e){cannotdraw(e)},false); } function candraw(e){ candraw=true; } function nowdraw(e){ var ctx=document.getelementbyid("mycanv").getcontext("2d"); x=e.offsetx||e.layerx||0; y=e.offsety||e.layery||0; if(candraw){ if(i==0){ ctx.strokestyle="red"; ctx.lineto(x,y); ctx.stroke(); } if(i>0){ ctx.fillstyle="red"; ctx.beginpath(); ctx.arc(x,y,radius,0,2*math.pi); ctx.fill(); i=0; } ctx.fillstyle="red"; ctx.beginpath(); ctx.arc(x,y,radius,0,2*math.pi); ctx.fill(); ctx.beginpath(); ctx.linewidth=2*radius; ctx.strokestyle="red"; ctx.moveto(x,y); } } function cannotdraw(){ candraw=false; i++; } window.onload=canvloder; </script> <canvas id="mycanv" ></canvas> </body> </html>
var candraw=false; function candraw(e){ candraw=true; } so... candraw? function or boolean? once overwrote candraw false in cannotdraw, candraw no longer function.
any way, 2 functions quite useless , should not exist in first place 2 separate functions. might want this:
function setdrawable(bool){ candraw = bool; } 
Comments
Post a Comment