CODEWITHSUNDEEP
javascripthtmlcanvas
Carey Brown
Carey Brown

Reputation: 9

How to make uploaded image in canvas draggable like google map function?

My question says it all. Here's my code that uploaded the image into the canvas element and I want it to be draggable like maps are in Google maps. Eventually I am going to want to zoom in and out.

Is this even possible in Canvas yet? In a lot of my searches I've seen that Canvas still has limitations so we should get that questioned answered first.

If anyone can find me simply javascript code that would be best. I am eventually transitioning this to an app and I would like to cut back on the load time with simpler JS.

If anyone has really good canvas.html5.javascript sources for ios development I would really appreciate that also. This is my first project and as per usual I have bit off more that I can chew. Thanks!

<!doctype html>
<head>
<meta charset="utf-8">
<title>Capstone Test</title>

<link rel="stylesheet" type="text/css" href="style.css" />

<!-- iPad icon for app --!>
<link rel="apple-touch-icon" href="#" />
<link rel="apple-touch-icon-precomposed" href="#"/>

<!-- Controls page scaling -->
<meta name="viewport" content="user-scalable=yes, width=device-width" />

<script src="NKit.js" type="text/javascript" charset="utf-8"></script>

<script>
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";

</script>

</head>

<body>

<div class="container">

<section class="left">

            <canvas id="myCanvas" height=1024 width=360>

            </canvas>

    </section>
</div>

Thanks!

Upvotes: 0

Views: 1107

Answers (1)

Declan Cook
Declan Cook

Reputation: 6126

You will need to add mouse / touch event bindings to the canvas element and then redraw the canvas base on the events.

http://jsfiddle.net/rpKXm/

here is a rough example I threw together. It doesn't handle multiple drags but I'll leave that as an exercise for you.

Hope it helps

Upvotes: 1

Related Questions