As a novice in canvas game development, I must apologize for my lack of knowledge.
I have an image with dimensions 2048px width and 1536px height that needs to be placed within a canvas (the width and height vary on different devices). While I am able to scroll the image, the issue is that it extends beyond the edges of the screen, leaving white space visible all around. For example, if a device has a width of 430 and a height of 300, users can scroll the image to view it completely. However, when swiping to scroll, the image seems to displace from the canvas as if stretched like rubber; once the swipe stops, the image aligns itself with the canvas borders once again. I have been struggling with this for days now. Any assistance would be greatly appreciated.
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: 100%;
z-index:-1;
}
#inner {
width: 1000px;
height: 1000px;
overflow: scroll;
}
</style>
<!-- Adding viewport -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no">
<script type="text/javascript" src="js/jquery_v1.9.1.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/cityPrototype.js"></script>
</head>
<body>
<div id="container">
<div id="inner">
<canvas id="can1"> </canvas>
</div>
</div>
</body>
</html>
Here is Javascript function
function init(){
can = document.getElementById('can');
cxt = can.getContext('2d');
can.width = can.parentNode.clientWidth;
can.height = can.parentNode.clientHeight;
bg.onload=function(){
alert("Onload");
cxt.drawImage(bg,0,0,can.width,can.height);
width, height);
};
bg.src = "img/01.jpg";
}
Despite conducting prior research before posting this query, I was unable to find a suitable solution. The application I am working on is built using PhoneGap framework, utilizing Canvas, JavaScript, and CSS.