JSFiddle - React, Tailwind, and code Playground

by alnitak

HTML

<div class="Container">
                <div id = 'left-div'>
                    <canvas class = "Blackboard" id = "blackboard-canvas" >
                        
                    </canvas>
                </div>                    
                <div id='right-div'>
                    <div id = 'tools-div'>
                        <ul>
                            <li><a href='#colorOption'>Color Options</a></li>
                            <li><a href='#toolbar-option'>Tool Bar</a></li>
                        </ul>
                        <div id='colorOption'>
                            Pick a Color
                            <canvas id='color-option-canvas' >
                                
                            </canvas>
                        </div>
                        <div id='toolbar-option'>
                            Tool bar options goes here
                        </div>
                    </div>
                </div>
                
                <br style="clear:both;"/>
            </div>            
            <script>
            $(document).ready(function(){
                //chrome seems to always show a text-selection cursor while dragging.
                //A temporary workaround
                document.onselectstart = function(){ return false; }
                var board = new Blackboard('blackboard-canvas');
            })
        </script>

CSS

body{ 
    font: 62.5% "Trebuchet MS", sans-serif;
}
.Blackboard{
    background-image: url(http://i1043.photobucket.com/albums/b438/wooxy99/blackboard.png);
    
    border-style: ridge;
    border-color: gray;
    border-width: 5px; 
    width: 96%;
    height: 96%;
    cursor: crosshair;
    position: relative;
    -webkit-border-radius: 16px;
    -webkit-box-shadow: 0px 6px 7px #0a0505;
};
.Blackboard:active{
    cursor: crosshair;
}

.Container{
    border-color: #666;
    border-width: 10px;
    border-style: inset;
    background-color: gray;
    width: 700px;
    height: 400px;
}

#right-div, #left-div{
    height: 100%;
}
#left-div{
    float: left;
    width: 60%;
}
#right-div{
    float: right;
    background-color: black;
    width: 40%;
}

JavaScript

function Blackboard(canvasId){
    this.isMouseDown = false;
    this.canvas = document.getElementById(canvasId);
    this.canvas.width = this.canvas.offsetWidth;
    this.canvas.height = this.canvas.offsetHeight;

    this.canvasContext = this.canvas.getContext('2d');
    this.lastMouseClickedPosition = null;
    var self = this;

    this.onMouseDown = function(e){
        self.isMouseDown = true;
        self.lastMouseClickedPosition = convertMousePositionFromMouseEvent(e);;
        self.onDraw(self.lastMouseClickedPosition);
    }
    
    this.onDraw = function(clickedPosition){
        var context = self.canvasContext;
        var x = clickedPosition.x;
        var y = clickedPosition.y;
            //temporary for testing rigth now
            if (!window.started) {
                context.beginPath();
                context.moveTo(x, y);
                window.started = true;
            } else {
                context.lineTo(x, y);
                context.stroke();
            }
    }
    
    this.onMouseUp = function(e){
        self.isMouseDown = false;
        self.lastMouseClickedPosition = convertMousePositionFromMouseEvent(e);
        window.started = false;
    }
    this.onMouseMove = function(e){
        if(self.isMouseDown) self.onMouseDown(e);
    }
    this.clearBoard = function(){
        self.canvas.width = self.canvas.width;
    }


    //add appropriate event listeners
    self.canvas.addEventListener("mousedown",this.onMouseDown,false);
    self.canvas.addEventListener('mouseup',this.onMouseUp,false);
    self.canvas.addEventListener('mousemove',this.onMouseMove,false);


}
function convertMousePositionFromMouseEvent(e)
{
    //this section is from http://www.quirksmode.org/js/events_properties.html
    var targ;
    if (!e)
        e = window.event;
    if (e.target)
        targ = e.target;
    else if (e.srcElement)
        targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;

   ...