Menu
I was able to successfully draw an image on an HTML canvas. But I need to be able to drag the image about on the canvas.
I know this function can be implemented easily by some JavaScript libraries like KinectJS. But I want to just do it with simple JavaScript.
window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var destX = 0; var destY = 0; var imageObj = new Image(); imageObj.onload = function(){ context.drawImage(imageObj, destX, destY); }; imageObj.src = "westeros.png"; <canvas id="myCanvas" height=1024 width=360></canvas> 
549
To make an object draggable set draggable=true on that element. Just about anything can be drag-enabled: images, files, links, files, or any markup on your page.
You can save a canvas to an image file by using the method canvas. toDataURL() , that returns the data URI for the canvas' image data.
JavaScript Canvas gets reference by HTML <canvas> tag element used to draw or program graphics on a web page via JavaScript.
To do dragging you handle 3 mouse events:
mousedown -- set a flag indicating that the drag has begun.
mouseup -- clear that drag flag because the drag is over
mousemove -- if the drag flag is set, clear the canvas and draw the image at the mouse position
Here is some code:
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <style> body{ background-color: ivory; } canvas{border:1px solid red;} </style> <script> $(function(){ var img = new Image(); img.onload = function(){ ctx.drawImage(img, 0,0); }; img.src = "http://images.christmastimeclipart.com/images/2/1271716593176_1788/img_1271716593176_17881.jpg"; var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var canvasOffset=$("#canvas").offset(); var offsetX=canvasOffset.left; var offsetY=canvasOffset.top; var canvasWidth=canvas.width; var canvasHeight=canvas.height; var isDragging=false; function handleMouseDown(e){ canMouseX=parseInt(e.clientX-offsetX); canMouseY=parseInt(e.clientY-offsetY); // set the drag flag isDragging=true; } function handleMouseUp(e){ canMouseX=parseInt(e.clientX-offsetX); canMouseY=parseInt(e.clientY-offsetY); // clear the drag flag isDragging=false; } function handleMouseOut(e){ canMouseX=parseInt(e.clientX-offsetX); canMouseY=parseInt(e.clientY-offsetY); // user has left the canvas, so clear the drag flag //isDragging=false; } function handleMouseMove(e){ canMouseX=parseInt(e.clientX-offsetX); canMouseY=parseInt(e.clientY-offsetY); // if the drag flag is set, clear the canvas and draw the image if(isDragging){ ctx.clearRect(0,0,canvasWidth,canvasHeight); ctx.drawImage(img,canMouseX-128/2,canMouseY-120/2,128,120); } } $("#canvas").mousedown(function(e){handleMouseDown(e);}); $("#canvas").mousemove(function(e){handleMouseMove(e);}); $("#canvas").mouseup(function(e){handleMouseUp(e);}); $("#canvas").mouseout(function(e){handleMouseOut(e);}); }); // end $(function(){}); </script> </head> <body> <canvas id="canvas" width=400 height=300></canvas> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
