javascript - Canvas change size of drawings live -
i'm trying achieve following. have html5 canvas, can draw in. code this:
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(); } } }
<html> <body onload="init()"> <canvas id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas> <div style="position:absolute;top:12%;left:43%;">choose color</div> <div style="position:absolute;top:15%;left:45%;width:10px;height:10px;background:green;" id="green" onclick="color(this)"></div> <div style="position:absolute;top:15%;left:46%;width:10px;height:10px;background:blue;" id="blue" onclick="color(this)"></div> <div style="position:absolute;top:15%;left:47%;width:10px;height:10px;background:red;" id="red" onclick="color(this)"></div> <div style="position:absolute;top:17%;left:45%;width:10px;height:10px;background:yellow;" id="yellow" onclick="color(this)"></div> <div style="position:absolute;top:17%;left:46%;width:10px;height:10px;background:orange;" id="orange" onclick="color(this)"></div> <div style="position:absolute;top:17%;left:47%;width:10px;height:10px;background:black;" id="black" onclick="color(this)"></div> <div style="position:absolute;top:20%;left:43%;">eraser</div> <div style="position:absolute;top:22%;left:45%;width:15px;height:15px;background:white;border:2px solid;" id="white" onclick="color(this)"></div> <img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;"> <input type="button" value="save" id="btn" size="30" onclick="save()" style="position:absolute;top:55%;left:10%;"> <input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:55%;left:15%;"> </body> </html>
so drawing lines 1 point another.
now i'm wondering following. of should know onenote
, has feature can draw something, , see "whoops, drawn big or small in comparison other things have drawn" , can mark , grab corner , make rectangle marked smaller or bigger.
i'm thinking same solution in canvas. people can draw in canvas, , there's resize
button, when click on it, can "draw" rectangle (like dotted border , transparet fill) , in rectangle marked. can grab 1 of corners , make marked drawings smaller or bigger, , move content well.
but honestly, have no idea how started that. has idea on how that?
not difficult:
- create button, attach event listener, call function. i’ll call
resize
purpose of guide - create dotted border overlay on canvas. make div, wrap canvas wrapper, apply bit of css. voilĂ .
- attach event handlers div make resizable or search web library can that.
- then you’ll have redraw canvas image
canvasrenderingcontext2d.drawimage()
.
it’s worth noting canvases raster-graphics. canvas become unsharp enlarging.
Comments
Post a Comment