javascript - HTML5 canvas zoom my drawings -
hello create program paint on html5 canvas. have problem need create few tools drawing , zoom. don't have idea how create zoom without delay. drawing example: http://jsfiddle.net/x5rrvcr0/
how can zooming drawings?
drawing code:
<style> canvas { background-color: #cecece; } html, body { background-color: #ffffff; } </style> <script> $(document).ready(function () { var paintcanvas = document.getelementbyid("paintcanvas"); var paintctx = paintcanvas.getcontext("2d"); var size = 500; paintcanvas.width = size; paintcanvas.height = size; var draw = false; var prevmousex = 0; var prevmousey = 0; function getmousepos(canvas, evt) { evt = evt.originalevent || window.event || evt; var rect = canvas.getboundingclientrect(); if (evt.clientx !== undefined && evt.clienty !== undefined) { return { x: evt.clientx - rect.left, y: evt.clienty - rect.top }; } } $("#paintcanvas").on("mousedown", function(e) { draw = true; var coords = getmousepos(paintcanvas); prevmousex = coords.x; prevmousey = coords.y; }); $("#paintcanvas").on("mousemove", function(e) { if(draw) { var coords = getmousepos(paintcanvas, e); paintctx.beginpath(); paintctx.linewidth = 10; paintctx.strokestyle = "#000000"; paintctx.moveto(prevmousex, prevmousey); paintctx.lineto(coords.x, coords.y); paintctx.stroke(); prevmousex = coords.x; prevmousey = coords.y; } }); $("#paintcanvas").on("mouseup", function(e) { draw = false; }); }); </script> <body> <canvas id="paintcanvas"></canvas> </body>
if want keep pixelated effect in zoom, need draw on temp canvas, after copy temp canvas main screen.
no longer need zoom in temp canvas, draw on 1:1 scale always. when copying view canvas, apply zoom (and maybe translate) want.
keep in mind drawings anti-aliased, when zooming see shades of grey when drawing in black, instance.
i kept recording code of @furqanzafar since idea record things in case want perform undo : in case delete last record entry , redraw everything.
http://jsfiddle.net/gamealchemist/x5rrvcr0/4/
function updatepaintcanvas() { paintcontext.clearrect(0, 0, paintcontext.canvas.width, paintcontext.canvas.height); paintcontext.save(); paintcontext.translate(cvsize * 0.5, cvsize * 0.5); paintcontext.scale(scale, scale); paintcontext.drawimage(drawcanvas, -cvsize * 0.5, -cvsize * 0.5); paintcontext.restore(); }
Comments
Post a Comment