Div Handle

by adamk33n3r

HTML

<div id="container">
    <div id="controls">
        <button id="close">X</button>
        <button id="minimize">&mdash;</button>
        <button id="move"></button>
        <canvas id="canvas" width="30" height="50"></canvas>
    </div>
    <i></i>
</div>

CSS

div#container {
    width: 200px;
    height: 200px;
    background-color: #222;
    padding: 10px;
    position: relative;
    border: 2px solid black;
    border-radius: 5px 0px 5px 5px;
}

div#controls {
    width: 20px;
    background: #222;
    position: absolute;
    left: 220px;
    margin-top: -12px;
    border: 2px solid black;
    border-left: 1px dotted black;
    border-bottom: none;
    border-radius: 0 5px 0 0;
}

div#controls:after {
    /*content: "";*/
    position: absolute;
    left: -1px;
    border: solid;
    width: 10px; height: 10px;
    border-color: black;
    border-width: 2px 0 0 2px;
    border-top-left-radius: 5px;
}

#close, #move, #minimize {
    width: 100%
}

#move {
    cursor: move;
    height: 25px;
}

#move:after {
    content: ":::";
}

button {
    padding: 0;
    cursor: pointer;
    border: none;
    background: transparent;
    outline: none;
}

i {
    background-color: gray;
    border-radius: 5px;
    width: 100px;
    height: 100px;
    margin: 0px auto;
    display: block;
    cursor: pointer;
}

i:hover {
    background-color: lightgray;
}

canvas {
    position: absolute;
    left: -1px;
    top: 55px;
}

JavaScript

ctx = document.getElementById("canvas").getContext("2d");
ctx.translate(0.5, 0.5);
cp1=[25,15]
cp2=[0,10]

ctx.beginPath();
ctx.moveTo(20,0);
ctx.bezierCurveTo(cp1[0],cp1[1],cp2[0],cp2[1],-1,35);
ctx.strokeStyle="#000"
ctx.lineWidth=4;
ctx.stroke();
ctx.lineTo(-1,0);
ctx.lineTo(300,0);
ctx.fillStyle="#222"
ctx.fill();
ctx.closePath();
/* ctx.beginPath();
ctx.rect(cp1[0]-5,cp1[1]-5,10,10);
ctx.rect(cp2[0]-5,cp2[1]-5,10,10);
ctx.fillStyle="#ff0000"
ctx.fill(); */