Using HTML5 Canvas & Javascript to Create Drawing Application

Twitter

Digg

In this post, you will come across a step by step guide through which you can design a simple web-based drawing application powered by the HTML5 Canvas and Javascript. The aim of this guide it to briefly explore the process of creating an app along the way learn about HTML5 & Javascript. This post will also help you learn or integrate the pure Javascript in the drawing app.

What is HTML5 Canvas?

Well, the HTML5 Canvas is an element which is used for drawing graphics while on the move via the scripting. Most of the time, the scripting used in this process is Javascript. The Canvas element is the only container for graphics, so it’s essential to make use of the script to draw actual graphics.

There are several methods to use Canvas for the drawing paths, boxes, texts, adding images and circles. In this guide, the FabricJS is used as the external canvas library and written JS functions which are deployed to handle different features. Given below are the tools which are required to carry out this process in a stress-free manner. Drawring with HTML5 Canvas

An HTML File
A Javascript File
A Canvas Library- Fabric.js

Here are the steps that you need to follow for creating a drawing app using HTML5 & Javascript:

Step 1- You need to create these two files in your app directory:

html
js or any other file name

Step 2- Import the whole Fabric.js library

Step 3- Import the image and your app structure should look like this:

DrawingApp

html
js
jpg

Once you are done with these steps, it’s time to write down the code for the drawing app:

Step 1:

Load up your image on the Canvas

var src = 'your_image_path';
 var canvas = new fabric.Canvas('canvas', {
                isDrawingMode: false
 });
fabric.Image.fromURL(src, function (oImg) {
                canvas.add(oImg);
 });

var src = 'your_image_path';

var canvas = new fabric.Canvas('canvas', {

isDrawingMode: false

});

fabric.Image.fromURL(src, function (oImg) {

canvas.add(oImg);

});

Step 2:

Adding different drawing functions which will assist you while making objects

Draw a solid Circle

var onSolidCircle = function () { canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 150, left: 150 })); }

1
2
3

var onSolidCircle = function () {
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 150, left: 150 }));
}

Draw a rectangle

var rect = new fabric.Rect({
               top: 100,
               left: 100,
               width: 60,
               height: 70,
               fill: '',
               selection: false,
               fill: '#f55'
});
canvas.add(rect);

var rect = new fabric.Rect({

top: 100,

left: 100,

width: 60,

height: 70,

fill: '',

selection: false,

fill: '#f55'

});

canvas.add(rect);

Step 3:

Now you have to add two functions: Start and Stop Drawing, which will enable you to notify the app when to draw and when not to.

var onStartDrawing = function () {
           canvas.isDrawingMode = true;
}
var onStopDrawing = function () {
           canvas.isDrawingMode = false;
}

var onStartDrawing = function () {

canvas.isDrawingMode = true;

}

var onStopDrawing = function () {

canvas.isDrawingMode = false;

}

Step 4:

Now you have to merge the Zoon In & Zoom Out functions. These two are the very basic feature of any design tool and can be commonly seen on all the drawing apps and software. The below-mentioned functions will let the objects and canvas to scale to a required factor.

Canvas needs two variables to control the zooming:

var canvasScale = 1;
var SCALE_FACTOR = 1.2;

1 2	var canvasScale = 1; var SCALE_FACTOR = 1.2;

Zoom In

var onZoomIn = function () {
            // TODO limit the max canvas zoom in
            canvasScale = canvasScale * SCALE_FACTOR;
            canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
            canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);
            var objects = canvas.getObjects();
            for (var i in objects) {
                var scaleX = objects[i].scaleX;
                var scaleY = objects[i].scaleY;
                var left = objects[i].left;
                var top = objects[i].top;
                var tempScaleX = scaleX * SCALE_FACTOR;
                var tempScaleY = scaleY * SCALE_FACTOR;
                var tempLeft = left * SCALE_FACTOR;
                var tempTop = top * SCALE_FACTOR;
                objects[i].scaleX = tempScaleX;
                objects[i].scaleY = tempScaleY;
                objects[i].left = tempLeft;
                objects[i].top = tempTop;
                objects[i].setCoords();
            }
            canvas.renderAll();
}

var onZoomIn = function () {

// TODO limit the max canvas zoom in

canvasScale = canvasScale * SCALE_FACTOR;

canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);

canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);

var objects = canvas.getObjects();

for (var i in objects) {

var scaleX = objects[i].scaleX;

var scaleY = objects[i].scaleY;

var left = objects[i].left;

var top = objects[i].top;

var tempScaleX = scaleX * SCALE_FACTOR;

var tempScaleY = scaleY * SCALE_FACTOR;

var tempLeft = left * SCALE_FACTOR;

var tempTop = top * SCALE_FACTOR;

objects[i].scaleX = tempScaleX;

objects[i].scaleY = tempScaleY;

objects[i].left = tempLeft;

objects[i].top = tempTop;

objects[i].setCoords();

}

canvas.renderAll();

}

Zoom Out

var onZoomOut = function () {
           canvasScale = canvasScale / SCALE_FACTOR;
           canvas.setHeight(canvas.getHeight() * (1 / SCALE_FACTOR));
           canvas.setWidth(canvas.getWidth() * (1 / SCALE_FACTOR));
           var objects = canvas.getObjects();
           for (var i in objects) {
               var scaleX = objects[i].scaleX;
               var scaleY = objects[i].scaleY;
               var left = objects[i].left;
               var top = objects[i].top;
               var tempScaleX = scaleX * (1 / SCALE_FACTOR);
               var tempScaleY = scaleY * (1 / SCALE_FACTOR);
               var tempLeft = left * (1 / SCALE_FACTOR);
               var tempTop = top * (1 / SCALE_FACTOR);
               objects[i].scaleX = tempScaleX;
               objects[i].scaleY = tempScaleY;
               objects[i].left = tempLeft;
               objects[i].top = tempTop;
               objects[i].setCoords();
           }
           canvas.renderAll();
}

var onZoomOut = function () {

canvasScale = canvasScale / SCALE_FACTOR;

canvas.setHeight(canvas.getHeight() * (1 / SCALE_FACTOR));

canvas.setWidth(canvas.getWidth() * (1 / SCALE_FACTOR));

var objects = canvas.getObjects();

for (var i in objects) {

var scaleX = objects[i].scaleX;

var scaleY = objects[i].scaleY;

var left = objects[i].left;

var top = objects[i].top;

var tempScaleX = scaleX * (1 / SCALE_FACTOR);

var tempScaleY = scaleY * (1 / SCALE_FACTOR);

var tempLeft = left * (1 / SCALE_FACTOR);

var tempTop = top * (1 / SCALE_FACTOR);

objects[i].scaleX = tempScaleX;

objects[i].scaleY = tempScaleY;

objects[i].left = tempLeft;

objects[i].top = tempTop;

objects[i].setCoords();

}

canvas.renderAll();

}

Reset Zoom

This function will bring all the objects to their respective original scale factors:

var onResetZoom = function () {
           canvas.setHeight(canvas.getHeight() * (1 / canvasScale));
           canvas.setWidth(canvas.getWidth() * (1 / canvasScale));
           var objects = canvas.getObjects();
           for (var i in objects) {
               var scaleX = objects[i].scaleX;
               var scaleY = objects[i].scaleY;
               var left = objects[i].left;
               var top = objects[i].top;
               var tempScaleX = scaleX * (1 / canvasScale);
               var tempScaleY = scaleY * (1 / canvasScale);
               var tempLeft = left * (1 / canvasScale);
               var tempTop = top * (1 / canvasScale);
               objects[i].scaleX = tempScaleX;
               objects[i].scaleY = tempScaleY;
               objects[i].left = tempLeft;
               objects[i].top = tempTop;
               objects[i].setCoords();
           }
           canvas.renderAll();
           canvasScale = 1;
}

var onResetZoom = function () {

canvas.setHeight(canvas.getHeight() * (1 / canvasScale));

canvas.setWidth(canvas.getWidth() * (1 / canvasScale));

var objects = canvas.getObjects();

for (var i in objects) {

var scaleX = objects[i].scaleX;

var scaleY = objects[i].scaleY;

var left = objects[i].left;

var top = objects[i].top;

var tempScaleX = scaleX * (1 / canvasScale);

var tempScaleY = scaleY * (1 / canvasScale);

var tempLeft = left * (1 / canvasScale);

var tempTop = top * (1 / canvasScale);

objects[i].scaleX = tempScaleX;

objects[i].scaleY = tempScaleY;

objects[i].left = tempLeft;

objects[i].top = tempTop;

objects[i].setCoords();

}

canvas.renderAll();

canvasScale = 1;

}

Summing Up

This post would give a basic idea about creating a simple yet powerful drawing app with the help of HTML5 Canvas. The Fabric.js is one of the most robust canvas JS library which provides you an opportunity to build a scalable browser and also a touch-based web drawing application.

Author Bio:

Anna Jhonson is a Professional web developer, a blogger by hobby and works for Markupcloud, that provide psd to html services. She loves sharing information regarding WordPress customization tips & tricks.

Top Rated HTML5 and CSS3 Application Development Courses

Build Responsive Real World Websites with HTML5 and CSS3

More Web and Mobile App Development and Related Articles:

Facebook

Twitter

Digg