Hi there,

 

i am facing scrolling problem on my canvas..

 

here is 2 canvas, ans one canvas has 5/6 image. i want to scroll it.

 

But its not scrolling

 

 

live link is here

 

 

and code is here

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Drag&Drop between Two Canvases</title>
	
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
	
	<style>
	body {
		background-color: ivory;
		padding:10px;
	}
	canvas {
		border:1px solid red;
		
	}
	#canvas {
		overflow-x: scroll;
        overflow-y: hidden;
        background: #ccc;
	}
	#canvas:active {
		cursor: move;
	}
	#container {
        width: 100%;
        height: 100%;
        background: #fff;
    }
    
	</style>
	
	</head>
<body>
<h3>This Is the Test for Dragging & Dropping from One Canvas to Another</h3>
<h4>Drag from Right to Left Canvas to Drop Selected Items</h4>
<canvas id="dropzone" width=500 height=200></canvas>
 

<canvas id="canvas" width=500 height=200><script>
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var drop = document.getElementById("dropzone");
		var dropCtx = drop.getContext("2d");

		var canvasOffset = $("#canvas").offset();
		var offsetX = canvasOffset.left;
		var offsetY = canvasOffset.top;

		var mouseIsDown = false;
		var frameWidth = 128;
		var frameHeight = 128;
		// checkmark for selected
		var checkmark = document.createElement("img");
		checkmark.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/smallCheckmark.png";

		var images = [];
		var items = [];
		items.push({
			description: "Tile#1",
			url: "http://3.imimg.com/data3/BY/KT/MY-11949127/floor-tiles-500x500.jpg",
			isSelected: false,
			isDropped: false,
			x: 0,
			y: 0
		});
		items.push({
			description: "Tile#2",
			url: "http://www.48ws.com/images/product/S/W/daltile-sw01-24x48-season-wood-colorbody-porcelain-orchard-grey-tile.jpg",
			isSelected: false,
			isDropped: false,
			x: 0,
			y: 0
		});
		items.push({
			description: "Tile#3",
			url: "http://fauxtintiles.com/wp-content/uploads/2014/12/217-Antique-Copper__12436.1410991827.800.800.jpg",
			isSelected: false,
			isDropped: false,
			x: 0,
			y: 0
		});
		items.push({
			description: "Tile#3",
			url: "http://fauxtintiles.com/wp-content/uploads/2014/12/217-Antique-Copper__12436.1410991827.800.800.jpg",
			isSelected: false,
			isDropped: false,
			x: 0,
			y: 0
		});
		items.push({
			description: "Tile#3",
			url: "http://fauxtintiles.com/wp-content/uploads/2014/12/217-Antique-Copper__12436.1410991827.800.800.jpg",
			isSelected: false,
			isDropped: false,
			x: 0,
			y: 0
		});


		var imgLoadCount = 0;
		for (var i = 0; i < items.length; i++) {
			images[i] = document.createElement("img");
			images[i].onload = function () {
				if (++imgLoadCount >= items.length) {
					draw();
				}
			}
			images[i].src = items[i].url;
		}

		function draw() {

			ctx.clearRect(0, 0, canvas.width, canvas.height);
			dropCtx.clearRect(0, 0, drop.width, drop.height);

			var canvasX = 0;
			var dropX = 0;
			// 
			for (var i = 0; i < items.length; i++) {
				if (items[i].isDropped) {
					x = dropX * 160 + 10;
					drawContainer(dropCtx, i, x, 20);
					dropX++;
					items[i].x = x;
				} else {
					x = canvasX * 160 + 10;
					drawContainer(ctx, i, x, 20);
					canvasX++;
					items[i].x = x;
				}
			}
		}

		// draw image container
		function drawContainer(context, index, x, y) {

			context.beginPath();
			context.rect(x, y + frameHeight, frameWidth, 30);
			context.fillStyle = "black";
			context.fill();
			context.beginPath();
			context.fillStyle = "white";
			context.font = "10pt Verdana";
			context.fillText(items[index].description, x + 10, y + frameHeight + 18);

			// draw a thumbnail of the image
			var img = images[index];
			if (img.width >= img.height) {
				context.drawImage(img, 0, 0, img.width, img.height,
				x, y, 128, 128 * img.height / img.width);
			} else {
				context.drawImage(img, 0, 0, img.width, img.height,
				x, y, 128 * img.width / img.height , 128);
			}

			// outer frame (green if selected)
			context.beginPath();
			context.rect(x - 2, y - 2, frameWidth + 4, frameHeight + 30 + 4);
			context.lineWidth = 3;
			context.strokeStyle = "lightgray";
			if (items[index].isSelected) {
				context.strokeStyle = "green";
				context.drawImage(checkmark, x + frameWidth - 30, y + frameHeight + 3);
			}
			context.stroke();

		}



		function handleMouseDown(e) {
			mouseX = parseInt(e.clientX - offsetX);
			mouseY = parseInt(e.clientY - offsetY);

			// Put your mousedown stuff here
			mouseIsDown = true;
		}

		function handleMouseUp(e) {
			mouseIsDown = false;
			mouseX = parseInt(e.clientX - offsetX);
			mouseY = parseInt(e.clientY - offsetY);

			// Put your mouseup stuff here
			for (var i = 0; i < items.length; i++) {
				var item = items[i];
				// have we clicked on something?
				if (!item.isDropped && mouseX >= item.x && mouseX <= item.x + frameWidth) {
					// if so, toggle its selection
					items[i].isSelected = !(items[i].isSelected);
					draw();
				}
			}
		}

		function handleDrop(e) {
			for (var i = 0; i < items.length; i++) {
				if (items[i].isSelected) {
					items[i].isDropped = true;
					items[i].isSelected = false;
					console.log(i);
				}
			}
			draw();
		}

		$("#canvas").mousedown(function (e) {
			handleMouseDown(e);
		});
		$("#canvas").mousemove(function (e) {
			handleMouseMove(e);
		});
		$("#canvas").mouseup(function (e) {
			handleMouseUp(e);
		});
		$("#canvas").mouseout(function (e) {
			handleMouseOut(e);
		});
		$("#dropzone").mouseup(function (e) {
			handleDrop(e);
		});
		
	</script></canvas>
 

    
</body>
</html>

Can anybody please help me ???

You might find the HTML5 drag and drop API better for this kind of thing.

 

Here's a work in progress where I am using it http://wasabiadmin.se/eflag you can drag the items in the table to the nav on the left sidebar. With this there is no need for canvas, just regular HTML elements.

wow nice !! thanks for the suggestion....

 

But can you please guide me " how to scroll these elements?

 

actually i have more than 70 image to load on right canvas. i can load these but i can scroll it

 

advance thanks for help

I'm not so experienced with canvas, but you could put the canvas in an element that has overflow: auto on it, then specify the canvas to have a width, but again i don't think this canvas is really suited to this drag and drop, the HTML5 drag & drop API was created for exactly what you are trying to do.