ul line size

sample boostrap dropdown button for line size

by jwstott

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div id="controls">
    <div class="btn-group"> <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
            Size
            <span class="caret"></span>
          </a>

        <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">1pt<div class='graph-bar' style="height: 1px"></div></a>

            </li>
            <li class="active"><a tabindex="-1" href="#">2pt<div class='graph-bar' style="height: 2px"></div></a>

            </li>
            <li><a tabindex="-1" href="#">3pt<div class='graph-bar' style="height: 3px"></div></a>

            </li>
            <li><a tabindex="-1" href="#">4pt<div class='graph-bar' style="height: 4px"></div></a>

            </li>
            <li><a tabindex="-1" href="#">5pt<div class='graph-bar' style="height: 5px"></div></a>

            </li>
            <li><a tabindex="-1" href="#">10pt<div class='graph-bar' style="height: 10px"></div></a>

            </li>
            <li><a tabindex="-1" href="#">20pt<div class='graph-bar' style="height: 20px"></div></a>

            </li>
        </ul>
    </div>
    <div class="btn-group"> <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
            Color
            <span class="caret"></span>
          </a>

        <ul class="dropdown-menu">
            <li> <a href="#">
                    <span class="color-preview" style="background-color: rgb(255,255,255);"></span>
                    <span>white</span>
            </a>

            </li>
            <li class="active"> <a href="#">
                    <span class="color-preview" style="background-color: rgb(255,0,0);"></span>
                   ...

CSS

.sample {
    width:25px;
    height:2px;
    color: black;
    background-color: black;
    display:block;
}
.drawing_canvas
{
  /*  width: 100%;
    height: 100%;
    */
    cursor: crosshair;
    background:url( http://d7.conveyclassrooms.com/assessmentimages/d025cb4d.2lw.html.png);
}
.graph-bar {
    vertical-align: middle;
    top: -15px;
    margin-left:25px;
    /* float:right;*/
    width: 35px;
    color: grey;
    background-color: black;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.color-preview {
    vertical-align: middle;
    margin: 0;
    height: 35px;
    width: 35x;
    border: 1px solid #ccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.07);
    box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.07);
    height: 20px;
    width: 20px;
    display: inline-block;
    cursor: pointer;
}

JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var isPenDown = false;
var localPen = {};

canvas.addEventListener('mousemove', function (evt) {
    var mousePos = getMousePos(canvas, evt);
   // var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
   // writeMessage(canvas, message);
    penMove(mousePos.x, mousePos.y);
}, false);

canvas.addEventListener('mousedown', function (evt) {
    var mousePos = getMousePos(canvas, evt);
    penDown(mousePos.x, mousePos.y);
}, false);
document.addEventListener('mouseup', function (evt) {
    penUp();
}, false);

function penDown(x, y) {
    isPenDown = true;
    localPen.x = x;
    localPen.y = y;
    console.log('penDown: ' + localPen.x + ' - ' + localPen.y);
};

function penMove(x, y) {
    if (isPenDown) {

        // Draw the line locally.
        drawLine(localPen.x, localPen.y, x, y);

        // Move the pen to the end of the line that was just drawn.
        localPen.x = x;
        localPen.y = y;
    }
};

function penUp() {
    isPenDown = false;
    console.log('pen up');
};
drawLine = function (x1, y1, x2, y2) {
    context.beginPath();
    context.moveTo(x1, y1);
    context.lineTo(x2, y2);
    context.stroke();
};

function writeMessage(canvas, message) {
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, 30);
    context.font = '18pt Calibri';
    context.fillStyle = 'black';
    context.fillText(message, 10, 25);
}

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}