A Collaboration White Board Using HTML 5 and SignalR

This is very simple and lightweight collaboration white board using HTML5 canvas API, JQuery and SignalR. Users can draw together in the white board.

Client Side Implementation

The client side implemented using HTML5 Canvas element and JQuery which helps users to draw lines and shapes. The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). Canvas has several methods for drawing paths, boxes, circles, characters, and adding images. The canvas element is only supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari. Using JavaScript, you can draw in to canvas like this:

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle="#FF0000";
context.StoreStyle = "#FFFF00";
context.fillRect(50,50,100,100);

First, you need to find the canvas element and need to get the context from canvas element, the context object is a built-in HTML5 object, with many properties and methods for drawing paths, boxes, circles, text, etc. To get the context object, you can use the getContext method of canvas element. Then using the context object, you can draw in the canvas object. You can find more details about canvas element – Canvas tutorial in MDN.

hub = $.connection.whiteboardHub;
if (canvas.getContext) {
    var context = canvas.getContext('2d');
    context.drawShape = function (shape, fillColor, color, size, x, y, x1, y1) {
        this.lineWidth = size;
        this.strokeStyle = color;
        this.fillStyle = fillColor;
        this.beginPath();
        switch (shape) {
            case 1:
                this.lineCap = "round";
                this.moveTo(x, y);
                this.lineTo(x1, y1);
                this.stroke();
                break;
            case 2:
                var width = x > x1 ? x - x1 : x1 - x;
                var height = y > y1 ? y - y1 : y1 - y;
                this.rect(x > x1 ? x1 : x, y > y1 ? y1 : y, width, height);
                this.stroke();
                this.fill();
                break;
            case 3:
                var width = x > x1 ? x - x1 : x1 - x;
                var height = y > y1 ? y - y1 : y1 - y;
                this.arc(x > x1 ? x1 : x, y > y1 ? y1 : y, (width + height) / 2, 0, 2 * Math.PI);
                this.stroke();
                this.fill();
                break;
            case 4:
                this.lineCap = "round";
                this.moveTo(x, y);
                this.lineTo(x1, y1);
                this.stroke();
                break;
            case 5:
                this.lineWidth = 20;
                this.lineCap = "square";
                this.strokeStyle = "#fff";
                this.moveTo(x, y);
                this.lineTo(x1, y1);
                this.stroke();
                break;
        }

        this.closePath();
    };
}

hub.Draw = function (shape, fillColor, color, size, x, y, x1, y1) {
    context.drawShape(shape, fillColor, color, size, x, y, x1, y1);
}

$.connection.hub.start();

JQuery is used for getting the mouse positions and the values from various dropdown lists. For shapes, like Line, Rectangle and Circle, on mouse down and mouse up events, invoking the DrawShape method in the server side. And for Pencil and Eraser, invoking the DrawShape method on mouse move event.

$("#mycanvas").mousedown(function (e) {
    isdrawing = true;
    x1 = x = e.pageX - this.offsetLeft;
    y1 = y = e.pageY - this.offsetTop;
});

$("#mycanvas").mousemove(function (e) {
    var shape = $("#ddlShape").val();
    if (isdrawing && (shape == 4 || shape == 5)) {
        x = e.pageX - this.offsetLeft;
        y = e.pageY - this.offsetTop;
        var size = $("#ddlSize").val();
        var color = $("#ddlColor").val();
        var fillColor = $("#ddlFillColor").val();
        hub.drawShape(shape, fillColor, color, size, x, y, x1, y1);
        x1 = x;
        y1 = y;
    }
});

$("#mycanvas").mouseup(function (e) {
    isdrawing = false;
    x1 = e.pageX - this.offsetLeft;
    y1 = e.pageY - this.offsetTop;
    var size = $("#ddlSize").val();
    var color = $("#ddlColor").val();
    var shape = $("#ddlShape").val();
    var fillColor = $("#ddlFillColor").val();
    hub.drawShape(shape, fillColor, color, size, x, y, x1, y1);
});

Server Side Implementation

The server side is implemented using SignalR – an async library for .NET to help build real-time, multi-user interactive web applications. You can install SignalR to your project using NuGet package manager console.

Install-Package SignalR

You can find more details and quick start tutorials on SingalR in SignalR website.

You can inherit from SingalR.Hubs.Hub class and SignalR will generate the necessary lightweight JavaScript proxies at the client side so that you can make calls to hub over the wire. Following is the server side implementation.

public class WhiteboardHub: Hub
{
    public void DrawShape(int shape, string fillColor, string color, 
        int size, int x, int y, int x1, int y1)
    {
        Clients.Draw(shape, fillColor, color, size, x, y, x1, y1);
    }
}

This application can be enhanced with the following features:

• Authentication of members
• Messaging option while drawing

And this project is inspired from Silverdraw project. Thank you Anoop for introducing SignalR. :)

The full source code uploaded with the post.

Related Content

1. How to add simple water mark to images
2. Drag and Drop in Silverlight 3
3. How to access page methods from JQuery
4. WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for ‘jquery’
5. Pass your own arguments to the ClientValidationFunction in a CustomValidator