Canvas

<style type="text/css">
    div {
        background:  #cccccc;
        border: #222222;
    }
   #canvas {
        width:100%;
        height:100%;
        background: white;
        border: none;
    }
</style>

<canvas id="canvas"
       onMouseDown="startDraw()"
       onMouseMove="doDraw()"
       onMouseUp="stopDraw()"
>
</canvas>
<script type="text/javascript" fhtmlignore="false">
        var canvas = document.getElementById("canvas");          
        var context = canvas.getContext("2d");
        var prevX;
        var prevY;
        var drawing = false;

        function startDraw(){
            prevX = 'NaN';
            prevY = 'NaN';
            drawing = true;
        }
        function stopDraw(){
            drawing = false;
        }
        function doDraw(){
            if (!drawing) return;
            var currentX = canvas.mouseX;
            var currentY = canvas.mouseY;
            if (prevX!='NaN') {
            //red line
            context.strokeStyle = "rgba(255, 0, 0, 1)";
            context.lineWidth = 5;
            context.beginPath();
            context.moveTo(prevX, prevY);
            context.lineTo(currentX, currentY);
            context.stroke();
        }
            prevX = currentX;
            prevY = currentY;
        }
</script>