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) {

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.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.