c# - Drawing on the canvas using mouse pointer does not work -
i've created web page in following. want allow user draw on canvas. following code not draw content.
<asp:content runat="server" id="featuredcontent" contentplaceholderid="featuredcontent"> <section class="featured"> <div class="content-wrapper"> <script type="text/javascript"> var canvas, ctx, flag = false, prevx = 0, currx = 0, prevy = 0, curry = 0, dot_flag = false; var x = "black", y = 2; function init() { canvas = document.getelementbyid('can'); ctx = canvas.getcontext("2d"); w = canvas.width; h = canvas.height; canvas.addeventlistener("mousemove", function (e) { findxy('move', e) }, false); canvas.addeventlistener("mousedown", function (e) { findxy('down', e) }, false); canvas.addeventlistener("mouseup", function (e) { findxy('up', e) }, false); canvas.addeventlistener("mouseout", function (e) { findxy('out', e) }, false); } function color(obj) { switch (obj.id) { case "green": x = "green"; break; case "blue": x = "blue"; break; case "red": x = "red"; break; case "yellow": x = "yellow"; break; case "orange": x = "orange"; break; case "black": x = "black"; break; case "white": x = "white"; break; } if (x == "white") y = 14; else y = 2; } function draw() { ctx.beginpath(); ctx.moveto(prevx, prevy); ctx.lineto(currx, curry); ctx.strokestyle = x; ctx.linewidth = y; ctx.stroke(); ctx.closepath(); } function erase() { var m = confirm("want clear"); if (m) { ctx.clearrect(0, 0, w, h); document.getelementbyid("canvasimg").style.display = "none"; } } function save() { document.getelementbyid("canvasimg").style.border = "2px solid"; var dataurl = canvas.todataurl(); document.getelementbyid("canvasimg").src = dataurl; document.getelementbyid("canvasimg").style.display = "inline"; } function findxy(res, e) { if (res == 'down') { prevx = currx; prevy = curry; currx = e.clientx - canvas.offsetleft; curry = e.clienty - canvas.offsettop; flag = true; dot_flag = true; if (dot_flag) { ctx.beginpath(); ctx.fillstyle = x; ctx.fillrect(currx, curry, 2, 2); ctx.closepath(); dot_flag = false; } } if (res == 'up' || res == "out") { flag = false; } if (res == 'move') { if (flag) { prevx = currx; prevy = curry; currx = e.clientx - canvas.offsetleft; curry = e.clienty - canvas.offsettop; draw(); } } } </script> <canvas id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas> </div> </section> but when include above code in html file extension .html, works. can pls tell me what's wrong in ? in cases, "canvas" not valid element too.
Comments
Post a Comment