Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

A Collaboration White Board Using HTML 5 and SignalR

, 2 Oct 2012
Rate this:
Please Sign up or sign in to vote.
It is very simple and light weight 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 … Continue reading →

It is very simple and light weight 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 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 SingalR – an async library for .NET to help build real-time, multi-user interactive web applications. You can install SingalR 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 light weight 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 enhanced with following features

  • Authentication of members
  • Messaging option while drawing

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

The full source code uploaded with the post.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Anuraj Parameswaran
Technical Lead
India India
Working as Tech. Lead
 
My blog : dotnetthoughts.net.
You can follow me in twitter : @anuraj
Follow on   Twitter   Google+

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 2 Oct 2012
Article Copyright 2012 by Anuraj Parameswaran
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid