I am preparing to write a widget for the browser that is both visual and interactive. I am a newbie to Javascript/Ecmascript and prototyping. I want to encapsulate the canvas element, abstract the data, and render visuals. A major design goal is to minimize developer effort. I am looking for direction and best practices. Nuff said here is what I have so far:My WidgetLib.jsvar WidgetFactory = WidgetFactory || (function() {  this.Kanvas = function(doid) {  this.domObjectID_ = doid;  this.domObject_ = document.getElementById(this.domObjectID_);  this.domObject_.addEventListener('click', Kanvas.onClick, false);  this.domObject_.addEventListener('mousedown', Kanvas.onMouseDown, false);  this.domObject_.widget_ = this;  this.domObject_.widget_.data_ = {};  this.domObject_.widget_.data_.cnt = 0;  // Get/Set canvas size, do other initialize stuff...};this.Kanvas.onClick = function() {   alert(this.widget_.domObjectID_ +  has been clicked  +    this.widget_.data_.cnt +  times);};this.Kanvas.onMouseDown = function(e) {  this.widget_.data_.cnt++;};return {  Kanvas: Kanvas};}()); // end of namespacePut this in the HTML head section<script src=WidgetLib.js>   Put this in HTML body section <canvas id=C01></canvas>Put this in window.onLoad functionvar k = new WidgetFactory.Kanvas(C01);Is this a good design? I know there are good libraries (paper,easeljs,...) but I have specific requirements not to use them and implement specific/proprietary drawing functions.
HTML canvas element Encapsulation
javascript;object oriented;html