Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
  <html>
    <head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <style type="text/css">
            /*#canvas{background: #F6F683}*/
            .canvasBackground{ position: absolute; top: 8px; left: 8px; width: 1000px; height: 2400px;z-index: -10;}
            #main { position: fixed; top: 5px; left: 1020px; width: 280px; height: 250px;}
            .icon{ cursor: pointer; cursor: hand; }
        </style>
        <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
        <script type="text/javascript">
            var lWidthE = 15;    //Line width eraser
            var lWidthM = 2;    //Line width marker
  
            $(document).ready(function() {
                $('.canvasBackground').css("background-image", "url(http://s22.postimg.org/i83b7ztch/notepad_page.png)");
            });
​
            var canvas;
            var ctx;
​
            var started = false;
            var lastx = 0;
            var lasty = 0;
​
            var memCanvas;
            var memCtx;
​
            var pointerCanvas;
            var pCtx;
​
            var points = [];
​
            function init() {
                // Bind canvas to listeners
                canvas = document.getElementById('canvas');
                canvas.addEventListener('mousedown', mouseDown, false);
                document.addEventListener('mousemove', mouseMove, false);
                document.addEventListener('mouseup', mouseUp, false);
​
                ctx = canvas.getContext('2d');
​
                // create an in-memory canvas
                memCanvas = document.createElement('canvas');
                memCanvas.width = 1000;
                memCanvas.height = 2400;
                memCtx = memCanvas.getContext('2d');
                ctx.lineJoin = 'round';
                ctx.lineCap = 'round';
            }
​
            function ctx_stuff() {
                if (v) {
                    ctx.lineWidth = lWidthE;
                    ctx.globalCompositeOperation = "source-over";
                    ctx.strokeStyle = "rgba(246,246,131,0)";
                }
                else {
                    ctx.lineWidth = lWidthM;
                    ctx.globalCompositeOperation = "source-over";
                    ctx.strokeStyle = "rgba(0,0,0,1)";
                }
            }
​
            function mouseDown(e) {
                var m = getMouse(e, canvas);
                points.push({
                    x: m.x,
                    y: m.y
                });
                started = true;
                ctx.clearRect(0, 0, 1000, 2400);
                // put back the saved content
                ctx.drawImage(memCanvas, 0, 0);
                memCtx.clearRect(0, 0, 1000, 2400);
                memCtx.drawImage(canvas, 0, 0);
                drawPoints(ctx, points);
            }
​
            function mouseMove(e) {
                if (started) {//to doodle
                    ctx.clearRect(0, 0, 1000, 2400);
//                    // put back the saved content
                    ctx.drawImage(memCanvas, 0, 0);
                    var m = getMouse(e, canvas);
                    points.push({
                        x: m.x,
                        y: m.y
                    });
                    drawPoints(ctx, points);
                } else {//to show where start point of doodle
                    var m = getMouse(e, canvas);
                    points.push({
                        x: m.x,
                        y: m.y
                    });
                    ctx.clearRect(0, 0, 1000, 2400);
                    // put back the saved content
                    ctx.drawImage(memCanvas, 0, 0);
                    drawPoints(ctx, points);
                    points = [];
                }
            }
​
            function mouseUp(e) {
                if (started) {
                    started = false;
                    // When the pen is done, save the resulting context
                    // to the in-memory canvas
                    memCtx.clearRect(0, 0, 1000, 2400);
                    memCtx.drawImage(canvas, 0, 0);
                    ctx.drawImage(memCanvas, 0, 0);
                    points = [];
                }
            }
​
            // clear both canvases!
            function clear123() {
                ctx.clearRect(0, 0, 1000, 2400);
                memCtx.clearRect(0, 0, 1000, 2400);
                cleanUpArray();
            }
​
            var small_x = 0, small_y = 0, big_x = 0, big_y = 0;
​
            function drawPoints(ctx, points) {
                ctx_stuff();
                // draw a basic circle instead
                if (points.length < 6) {
                    var b = points[0];
                    if (v) {
                        ctx.beginPath(), ctx.arc(b.x, b.y, ctx.lineWidth / 2, 0, Math.PI * 2, !0), ctx.closePath(), ctx.fillStyle = "rgba(246,246,131,0)", ctx.fill();
//                        ctx.clearRect(b.x - (lWidthE / 2), b.y - (lWidthE / 2), (lWidthE), (lWidthE));
​
                    } else {
                        ctx.beginPath(), ctx.arc(b.x, b.y, ctx.lineWidth / 2, 0, Math.PI * 2, !0), ctx.closePath(), ctx.fillStyle = "rgba(0,0,0,1)", ctx.fill();
                    }
                    return;
                }
​
                ctx.beginPath(), ctx.moveTo(points[0].x, points[0].y);
                // draw a bunch of quadratics, using the average of two points as the control point
                for (var i = 1; i < points.length - 2; i++) {
                    var c = (points[i].x + points[i + 1].x) / 2,
                            d = (points[i].y + points[i + 1].y) / 2;
//                    if (v) {
//                        ctx.clearRect(points[i].x - (lWidthE / 2), points[i].y - (lWidthE / 2), lWidthE, lWidthE);
//                    }
//                    else {
                        ctx.quadraticCurveTo(points[i].x, points[i].y, c, d);
//                    }
                }
//                if (!v) {
                    ctx.quadraticCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y), ctx.stroke();
//                }
            }
​
            // Creates an object with x and y defined,
            // set to the mouse position relative to the state's canvas
            // If you wanna be super-correct this can be tricky,
            // we have to worry about padding and borders
            // takes an event and a reference to the canvas
            function getMouse(e, canvas) {
                var element = canvas, offsetX = 0, offsetY = 0, mx, my;
​
                // Compute the total offset. It's possible to cache this if you want
                if (element.offsetParent !== undefined) {
                    do {
                        offsetX += element.offsetLeft;
                        offsetY += element.offsetTop;
                    } while ((element == element.offsetParent));
                }
​
                mx = e.pageX - offsetX;
                my = e.pageY - offsetY;
​
                ex = mx;
                ey = my;
​
                var tr;
                if (v) {
                    tr = lWidthE + 250;
                } else {
                    tr = lWidthM + 250;
                }
                if (mx < small_x || small_x === 0) {
                    small_x = mx - tr;
                    if (small_x < 0) {
                        small_x = 0;
                    }
                }
                if (mx > big_x || big_x === 0) {
                    big_x = mx + tr;
                    if (big_x > 1000) {
                        big_x = 1000;
                    }
                }
                if (my < small_y || small_y === 0) {
                    small_y = my - tr;
                    if (small_y < 0) {
                        small_y = 0;
                    }
                }
                if (my > big_y || big_y === 0) {
                    big_y = my + tr;
                    if (big_y > 2400) {
                        big_y = 2400;
                    }
                }
​
                // We return a simple javascript object with x and y defined
                return {x: mx, y: my};
            }
​
            var v = false;
​
            function erase() {
                if (v) {
                    v = false;
                }
                else {
                    v = true;
                }
            }
        </script>
    </head>
    <body onload="init();">
        <div class="canvasBackground"></div>
        <div class="canvasBackground"></div>
    <canvas id='canvas' width='1000' height='2400'></canvas>
    <div id="main">
        <p>
            <label for="amountM">Marker size:</label>
            <input type="text" id="amountM" style="border: 0; color: #f6931f; font-weight: bold;"/>
        </p>
        <div title="Slide the bar to change size of marker" id="slider-range-minM"></div>
        <p>
            <label for="amountE">Eraser size:</label>
            <input type="text" id="amountE" style="border: 0; color: #f6931f; font-weight: bold;"/>
        </p>
        <div title="Slide the bar to change size of eraser" id="slider-range-minE"></div>
        <br/>
        <button title="Clear the canvas area." onclick='clear123();'>Clear</button>
        <input type="button" id="btnErase" title="Click to change between eraser and marker." onclick='erase();' value="Eraser/Marker"/>
        <img class="icon" src="icons/undo-icon.png" alt="Undo." title="Undo" onclick="javascript:undo();">
        <img class="icon" src="icons/redo-icon.png" alt="Redo." title="Redo" onclick="javascript:redo();">
    </div>
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers