Maybe it's time to bring to our js code more organization. Those part of scripts, that operates with DOM by jQuery or directly, is View in MVC. Those part of scripts that sends and retrieves data from backend by, again, jQuery or with XHR is Model in MVC. Strict separating of this two parts forces us to write some extra code, that will be operates with both of them to keep our code still working. This is Controller.
MVC is object-oriented pattern. We should put our functions in different objects to separate them. Connections between different parts can be done by passing references to other objects. There is should references to View and to Model in Controller object, but no direct referencing between View and Model objects.
Choose which way is more natural for you and try to organize code from Canvas,js and Draw.js in one single file CanvasFronted.js, containing three objects (CanvasView, CanvasController, CanvasModel) and code that connects them.
Maybe it's time to bring to our js code more organization. Those part of scripts, that operates with DOM by jQuery or directly, is View in MVC. Those part of scripts that sends and retrieves data from backend by, again, jQuery or with XHR is Model in MVC. Strict separating of this two parts forces us to write some extra code, that will be operates with both of them to keep our code still working. This is Controller.
MVC is object-oriented pattern. We should put our functions in different objects to separate them. Connections between different parts can be done by passing references to other objects. There is should references to View and to Model in Controller object, but no direct referencing between View and Model objects.
There several way to delcare objects in JS:
Choose which way is more natural for you and try to organize code from
Canvas,jsandDraw.jsin one single fileCanvasFronted.js, containing three objects (CanvasView,CanvasController,CanvasModel) and code that connects them.