HTML canvas element Encapsulation

Question

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.js

var 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 namespace

Put 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 function

var 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.