imac2000

well got it working if anyone is have the same trouble, here is a solution it not perfect yet but it may help someone with the same problem

y_offset = Math.round(state.camera_y / state.tile_height);
height_offset = Math.round((self.setup.height / state.tile_height) + y_offset) + 1;

x_offset = Math.round(state.camera_x / state.tile_width);
width_offset = Math.round((self.setup.width / state.tile_width) + x_offset) + 1;					

if(height_offset > state.map_height)
	height_offset = state.map_height
if(width_offset > state.map_width)
	width_offset = state.map_width


for (var y = y_offset; y < height_offset; y++) {
	col = state.map_data[y];
	for (var x = x_offset; x < width_offset; x++) {
		color = (state.map_data[y][x]==1)?'#fff':'#000';			
		self._draw({
			type:'rec',
			x: x * state.tile_width - state.camera_x,
			y: y * state.tile_height - state.camera_y,
			width: state.tile_width,
			height: state.tile_height,
			fill: color,
			visible: true
		},self.ctx);
	};
};

Hi Palo

thanks I have never heard of lint before will try it out, I will play around with the camera x,y offset values, I am just unsure how exactly I should reduce the map loop.

I have looked into different canvas libs like kinetic limejs and other, but I want to build one so I could understand what was happening under the hood.

currently my lib supports images, sprites animations and simple events

have a look here give it a second or 2 I have added a preloading indicator (click around)

http://code-creative.net/game1/

Thanks again

Ian 

I use sublime text 2, it has great code complete and zen coding which is nice for html.

there are tools to test in multiple browsers like 

https://browserlab.adobe.com/en-us/index.html#

I have to admit I haven't used any i just have chrome and ie open all the time while I've working,

I trend to get stuff running in chrome and work backwards to get IE running.