javascript - Draw on Image loaded inside HTML canvas -
i have html canvas in ionic app.
<canvas id="canvas" color="{{ color }}" width="800" height="600" style="position:relative;"></canvas> in canvas, loading image. below code controller
var canvas = document.getelementbyid('canvas'); var context = canvas.getcontext('2d'); var img = new image(); img.src = $stateparams.imageid; img.onload = function() { context.drawimage(img, 0, 0, canvas.width, canvas.height); } after image loaded, users need ability write on image , circle/highlight areas of image.
doesn't html canvas provide feature default? right not able annotate on image. how can achieve this?
you need implement yourself.
you can hooking mouse click / move events. using 2d context, draw small rectangle @ mouse's current position if moves , left mouse button down.
the effect similar windows paint pencil tool. here's simple example.
<html> <head> <style> canvas{ border: 1px solid black; } </style> </head> <body> <canvas id="mycanvas"></canvas> <script> var canvas = document.getelementbyid("mycanvas"); var ctx = canvas.getcontext("2d"); var ismousedown = false; canvas.onmousedown = function(e){ ismousedown = true; } canvas.onmouseup = function(e){ ismousedown = false; } canvas.onmousemove = function(e){ if(ismousedown === false){ return; } var canvasposition = canvas.getboundingclientrect(); var x = e.clientx - canvasposition.left; var y = e.clienty - canvasposition.top; ctx.fillrect(x, y, 2, 2); }; </script> </body> </html>
Comments
Post a Comment