canvas - buggy iterative cropping function in javascript code -

I wanted to break a user loaded image into rectangular pieces and to show everyone on user input This snippet is written piece with a piece of distance between yourself and neighboring pieces.

I think that every element is said to break and display that the function is the cause of the problem, but what part can not be understood. Function breaks () {// to add more, incomplete first = 0; Var piece _ x = (ell.width% mouse_xt); Var piece_y = (ell.height% mouse_yt); Var old_values ​​= New Array; Var counter_i = 0; Var counter_j = 0; (For _y = 0; _y & lt; = old_height; _y = _y + mouse_yt) for {old_values ​​[counter_i, for example, _x = 0; _x & lt; = old_width; _x = _x + mouse_xt} Counter_j] = {x: _x, Y y}; Counter_j + = 1; } Counter_j = 0; Counter_i + = 1} console.log (old_value); Var start_x = 0; Var start_y = 0; (For __x = 0; __x

is left.

Is there some light on this?

Bug

Everything works fine until the user press brakes, then the image disappears and whichever is left is an empty canvas. Here is an example that slices the image with padding:

  & lt ;; Doctype html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Link rel = "stylesheet" type = "text / css" media = "all" href = "css / reset.css" /> & Lt ;! - Reset CSS - & gt; & Lt; Script type = "text / javascript" src = "http://code.jquery.com/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Style & gt; Body {background color: ivory; } Canvas {boundary: 1 px solid red;}  & Lt; Canvas id = "canvas" width = 300 height = 300 & gt; & Lt; / Canvas & gt; & Lt; / Body & gt; & Lt; / Html & gt;