Adding plugin for static canvas

 Overview

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 http://paindoodlerplugindev.blogspot.co.uk/2013/05/overview.html. You can unzip the file to understand the contents.

Prerequisite

1. Basic understanding of paint doodler interface http://paintdoodler.blogspot.co.uk/p/paint-doodler-user-interface.html
2. Basic understanding of the paint doodler drawing layer architecture http://paintdoodler.blogspot.co.uk/p/layer.html
3. Paint doodler plugin overview http://paindoodlerplugindev.blogspot.co.uk/2013/05/overview.html
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

Complete Plugin used in this tutorial can be found at http://www.paintdoodler.com/plugins/blurbrushpaintdoodlertutorial/blurbrushpaintdoodlertutorial.zip

1. tools.txt -  Used to associate an icon to plugin on toolbox  http://www.paintdoodler.com/plugins/blurbrushpaintdoodlertutorial/tools.txt
 setUpUIPaintDoodlerTutorial function attached to onclick event of the tool bar icon is used to initialize and start the plugin.

2. control.txt - Used to define input controls for plugin. Initialized and opened using the function setUpUIPaintDoodlerTutorial attached to onclick event   http://www.paintdoodler.com/plugins/blurbrushpaintdoodlertutorial/control.txt
3. js.txt - Script file containing the plugin code   http://www.paintdoodler.com/plugins/blurbrushpaintdoodlertutorial/js.txt

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
    hideControls('control');
    //show control associated to blur brush plugin
   document.getElementById('blurBrushPaintDoodlerTutorialControl').style.display='';
    //attach the plugin to static canvas layer
    initializeBlurBrushPluginPaintDoodlerTutorial();
    //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
    toolShape='blurbrushpaintdoodlertutorial';
  //open ControlBox to open the controls
     openControlBox();
}

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

strokeStart 
draw
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 = this.srcIData.data;
    var dataCopy=srcIDataCopy.data;
    //size of drawing brush
    var sizeelm=document.getElementById('blurbrushpaintdoodlertutorialsize');

    if (typeof sizeelm =='undefined'){
        return;
    }
    var size = parseInt(sizeelm.value);
    var countPixels=0;
    var rmean,gmean,bmean;
    rmean=0;
    gmean=0;
    bmean=0;
    //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{
                countPixels++;
                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
    this.context.putImageData(srcIDataCopy,0,0);


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

Note

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 - http://www.paintdoodler.com/