Friday, 13 September 2013

Adding plugin for static canvas


In this tutorial we will learn how to create plugin for the static layer. The example described in this tutorial will allow you to create a blur brush. You can use the plugin attached with this tutorial by following the steps described in overview tutorial You can unzip the file to understand the contents.


  1. Basic understanding of paint doodler interface
  2. Basic understanding of the paint doodler drawing layer architecture
  3. Paint doodler plugin overview
  4. Basic understanding of HTML 5 canvas image manipulation. This tutorial used a pixel by pixel manipulation of the underlying image.
  5. Basic understanding of java script.

Components of the blur brush plugin

  1. tools.txt -  Used to associate an icon to plugin on toolbox
  2.  setUpUIPaintDoodlerTutorial function attached to onclick event of the tool bar icon is used to initialize and start the plugin.
  3. control.txt - Used to define input controls for plugin. Initialized and opened using the function setUpUIPaintDoodlerTutorial attached to onclick event
  4. js.txt - Script file containing the plugin code

Attaching /Initializing new plugin to existing static canvas layer plugins

// function to associate plugin to static canvas layer
function initializeBlurBrushPluginPaintDoodlerTutorial(){
    //canvasList global variable to contain the list of existing canvas layers names
    //Associated plugin to static cavas layer by checking the type property of canvaslayer
    for (var i = canvasList.length - 1; i >= 0; i--) {
        if (canvasMap[canvasList[i]].type == 'static' && typeof canvasMap[canvasList[i]].drawingStyle['blurbrushpaintdoodlertutorial'] == 'undefined' ) {
        //drawingstyle map of plugins attached to current static layer. Please note that toolShape variable should be initialized with key ('blurbrushpaintdoodlertutorial') see below
          //canvasMap global variable containing list of canvasLayerObject
          canvasMap[canvasList[i]].drawingStyle['blurbrushpaintdoodlertutorial'] = new BlurBrushPaintDoodlerTutorial(canvasMap[canvasList[i]].ctx) ;
// function associated to onclick event associated to toolbar icon
function setUpUIPaintDoodlerTutorial(){
    //hide any controls if already open
    //show control associated to blur brush plugin
    //attach the plugin to static canvas layer
    //toolShape a global variable to describe which plug in should be used. Please note the string in toolshape should be same as string used to attach plugin to drawingStyle
  //open ControlBox to open the controls
Construction function
We start creating the plugin by defining a prototype construction function as below
Prototype constructor must pass an argument context
//plugin prototype constructor function
function BlurBrushPaintDoodlerTutorial(context) {
    //HTML 5 canvas context passed during attach plugin proceess by getting the context associated to canvas layer using canvasMap see above for plugin initialization
    this.context = context;
    //boolean flag to describe if enable and cancel drawing using this plugin
    this.shouldDraw = false;
    //copy of the pixel data of the underlying canvas layer
    this.srcIData =null;

Attaching to mouse and touch events
Prototype constructed above must have following methods with same method signatures as defined below
  1. strokeStart
  2. draw
  3. strokeEnd
//prototype function called on touch start or mouse down event mouseX and MouseY contain the current co-ordinates of the mouse pointer on the underlying canvas layer
BlurBrushPaintDoodlerTutorial.prototype.strokeStart = function(mouseX, mouseY) {
    //take a copy of the canvas layer pixel data
    this.srcIData =this.context.getImageData(0,0,canvasWidth,canvasHeight);
    this.shouldDraw = true;
//prototype function called on touch move or mouse move event
BlurBrushPaintDoodlerTutorial.prototype.draw = function(mouseX, mouseY) {

    var srcIDataCopy =this.context.getImageData(0,0,canvasWidth,canvasHeight);
    var data =;
    //size of drawing brush
    var sizeelm=document.getElementById('blurbrushpaintdoodlertutorialsize');

    if (typeof sizeelm =='undefined'){
    var size = parseInt(sizeelm.value);
    var countPixels=0;
    var rmean,gmean,bmean;
    //iterate through the pixels under drawing brush
    for(var x = mouseX-size/2; x < mouseX+size/2; x++) {
        for(var y = mouseY-size/2; y < mouseY+size/2; y++) {
            if (x<0||y<0||x>=canvasWidth||y>=canvasHeight){

            }   else{
                rmean=rmean+data[((canvasWidth * y) + x) * 4 + 0];
                gmean=gmean+data[((canvasWidth * y) + x) * 4 + 1];
                bmean=bmean+data[((canvasWidth * y) + x) * 4 + 2];
    //replace the canvas data with the average value of the surrounding pxel
    dataCopy[((canvasWidth * mouseY) + mouseX) * 4 + 0]=rmean/countPixels;
    dataCopy[((canvasWidth * mouseY) + mouseX) * 4 + 1]=gmean/countPixels;
    dataCopy[((canvasWidth * mouseY) + mouseX) * 4 + 2]=bmean/countPixels;
    //replace the canvas data with the manipulated pixel data

//prototype function called on touch end or mouse up event
BlurBrushPaintDoodlerTutorial.prototype.strokeEnd = function() {
    this.shouldDraw = false;


  1. paintdoodlertutorial is added at the end of each method variable to create a unique name. It is the responsibility of developer to create unique names so that it does not conflicts with other plugin names and is globally unique
This post is part of series plugin development tutorial series for Paint Doodler app.

This is the official blog for paint doodler app
Online painting,drawing and image editing platform . paint doodler is based html5 canvas and is purely java script diven
Doodle Paint is a full featured painting and image editing platform providing users with versatile collection of tools and enabling users to contribute to ever growing community of doodlers with new features through plug-in.
visit -

No comments:

Post a Comment