JSFiddle - React, Tailwind, and code Playground

by BlaXpirit

HTML

<div id="canvas-wrapper">
    <canvas id="canvas1" width="448" height="208">
        Please stop using this junk and download a good browser.<br/>
        Recommended web browsers:
        <a href="http://blax.tk/get-chromium">Chromium</a>,
        <a href="http://www.opera.com/">Opera</a>
    </canvas>
</div>
<div id="chat">
    <div id="chat-messages-container">
        <div id="chat-messages">
            <strong>Lamer</strong>: Hey, I'm lamer!<br/>
            <strong>Lamer2</strong>: What a coincidence...<br/>
            <strong>Lamer2</strong>: I am a lamer too!<br/>
        </div>
    </div>
    <div id="chat-input">
        <input type="text" id="chat-input-message"/>
        <input type="button" id="chat-input-submit" value="Send"/>
    </div>
</div>
<!--<br/><input type="button" value="Add image" id="addimg"/>-->

CSS

#canvas-wrapper{
    background: #ffffff url('http://blaxpirit.org.ua/TheRoom/floor.png') repeat;
    width: 448px;
    height: 208px;
    border: 1px solid black;
    position: relative;
}
#chat{
    background-color: #aff;
    width: 448px;
    height: 70px;
    border: 1px solid #000;
    border-top: 0;
}
#chat-messages-container{
    overflow: auto;
    height: 45px;
    border-bottom: 1px solid #000;
}
#chat-input-message{
    width: 150px;
}
#chat-input-submit{
    width: 40px;
}

JavaScript

var canvas;
var d=0;
var x="";
var y="";
var c;

function mdown(ev)
{
    d=1;
    if (ev.offsetX||ev.offsetX==0)
    {
        x=ev.offsetX;
        y=ev.offsetY;
    }
    else if (ev.layerX||ev.layerX==0) //for shitty browsers
    {
        x=ev.layerX;
        y=ev.layerY;
    }
    c.lineJoin='round';
    c.lineCap='round';
    c.lineWidth=5;
    if(ev.altKey){c.lineWidth+=5;}
    if(ev.ctrlKey){c.lineWidth+=10;}
    if(ev.shiftKey){c.lineWidth+=20;}
    if (ev.button==0)
    {
        c.strokeStyle="#000";
        c.globalAlpha=1;
        c.globalCompositeOperation='source-over';
    }
    else
    {
        c.globalCompositeOperation='copy';
        c.globalAlpha=0;
        c.lineWidth+=20;
    }
    c.beginPath();
    c.moveTo(x,y);
    c.lineTo(x,y);
    c.stroke();
    c.beginPath();
    c.moveTo(x,y);
}
function mmove(ev)
{
    if(d)
    {
        if (ev.offsetX||ev.offsetX==0)
        { // Opera
            x=ev.offsetX;
            y=ev.offsetY;
        }
        else if (ev.layerX||ev.layerX==0)
        { // Firefox
            x=ev.layerX;
            y=ev.layerY;
        }
        c.lineTo(x,y);
        c.stroke();
        c.beginPath();
        c.moveTo(x,y);
    }
}
function mup(ev)
{
    ev.preventDefault();
    d=0;
    x="";
    y="";
    c.stroke();
}

$(function(){
    canvas=document.getElementById('canvas1');
    c=canvas.getContext('2d');
    canvas.addEventListener('mousedown',mdown,false);
    canvas.addEventListener('mousemove',mmove,false);
    canvas.addEventListener('mouseup',mup,false);
    
    /*$('#addimg').click(function(ev){
        var img=new Image();
        $(img).load(function(){
            c.drawImage(img,Math.random()*(canvas.width-img.width),Math.random()*(canvas.height-img.height));
        });
        img.src='http://i.imgur.com/MDIDI.jpg';
    })*/
    
})