JSFiddle - React, Tailwind, and code Playground

by Dennis Betman

HTML

<input type="color" id="getColor" />
<div class="editor">
    <div x="1" y="1" class="vierkant"></div>
    <div x="1" y="2" class="vierkant"></div>
    <div x="1" y="3" class="vierkant"></div>
    <div x="1" y="4" class="vierkant"></div>
    <div x="1" y="5" class="vierkant"></div>
    <div x="2" y="1" class="vierkant"></div>
    <div x="2" y="2" class="vierkant"></div>
    <div x="2" y="3" class="vierkant"></div>
    <div x="2" y="4" class="vierkant"></div>
    <div x="2" y="5" class="vierkant"></div>
    <div x="3" y="1" class="vierkant"></div>
    <div x="3" y="2" class="vierkant"></div>
    <div x="3" y="3" class="vierkant"></div>
    <div x="3" y="4" class="vierkant"></div>
    <div x="3" y="5" class="vierkant"></div>
    <div x="4" y="1" class="vierkant"></div>
    <div x="4" y="2" class="vierkant"></div>
    <div x="4" y="3" class="vierkant"></div>
    <div x="4" y="4" class="vierkant"></div>
    <div x="4" y="5" class="vierkant"></div>
    <div x="5" y="1" class="vierkant"></div>
    <div x="5" y="2" class="vierkant"></div>
    <div x="5" y="3" class="vierkant"></div>
    <div x="5" y="4" class="vierkant"></div>
    <div x="5" y="5" class="vierkant"></div>
</div>
<ul>
    <li><a id="pencil" class="active" href="javascript:void(0)">Pencil</a>

    </li>
    <li><a id="erase" href="javascript:void(0)">Erase</a>

    </li>
    <li><a id="picker" href="javascript:void(0)">Colorpicker</a>

    </li>
</ul>

CSS

body {
    background:lightblue;
}
.editor {
    width:100px;
    height:100px;
    float:left;
    position:relative;
    cursor: crosshair;
    -webkit-user-select: none;
    background:grey;
}
.drawCursor {
    cursor: url(http://www.cursor.cc/cursor/715/23/cursor.png), auto;
}
.eraseCursor {
    cursor: url(http://thetis-sysph.sourceforge.net/img/thetis/icons/erase.gif), auto;
}
.pickCursor {
    cursor: url(http://wangweiqiang.net/demo/MagicNote/images/quill-cursor.png), auto;
}
.editor .vierkant, .editor .vierkantPick {
    position:relative;
    box-sizing:border-box;
    border:1px solid black;
    width: calc(100% / 5);
    height: calc(100% / 5);
    float:left;
    background-color:white;
    background:white;
}
ul li a.active {
    color:red;
}

JavaScript

function checkDrawPencil(marker) {
    $("ul > li > a").removeClass("active");
    $("#" + marker).addClass("active");

    if (marker == "pencil") {
        drawColor($("#getColor").val());
        $(".editor").addClass("drawCursor");
        $(".editor").removeClass("pickCursor");
        $(".editor").removeClass("eraseCursor");
    } else if (marker == "erase") {
        drawColor("transparent");
        $(".editor").addClass("eraseCursor");
        $(".editor").removeClass("drawCursor");
        $(".editor").removeClass("pickCursor");
    }
     else if (marker == "picker") {
        $(".editor").addClass("pickCursor");
        $(".editor").removeClass("drawCursor");
        $(".editor").removeClass("eraseCursor");
    }
}

function drawColor(pencilColor) {
    // Draw
    if (pencilColor != "transparent") {
        $("#getColor").val(pencilColor);
    }
    var clicking = false;
    $('.editor').mousedown(function () {
        clicking = true;
    });
    $('.editor').mouseup(function () {
        clicking = false;
    });
    $(".editor .vierkant").click(function () {       
        $(this).css("background-color", pencilColor);
    });
    $(".editor .vierkant").mousedown(function () {       
        $(this).css("background-color", pencilColor);
    });
    $("#getColor").change(function () {
        drawColor($(this).val());
        checkDrawPencil("pencil");
    });
    $(".editor").mouseleave(function () {
        clicking = false;
    });
    $(".editor .vierkant").on("mouseover", function () {
        if (clicking) {
            $(this).css("background-color", pencilColor);
        }
    });
}

drawColor("#ff0000");
$(".editor").addClass("drawCursor");

$("ul > li > a").click(function () {
    var getId = $(this).attr('id');
    checkDrawPencil(getId);
});

var CtrlZ = false;

$("html").keydown(function(event){
    if(event.keyCode == 17){
        CtrlZ = true;
    }
});

$("html").keyup(function(event){
    if(event.keyCode == 90){
        if(CtrlZ){
...