<!DOCTYPE html>
<html>
    
    <head>
        <title>Paint</title>
        <style>
            body {
                
                width: 1000px;
            }
            #paint {
                cursor: crosshair;
                border:2px solid #000;
                border-radius:12px;
                position:relative;
                left:400px;
                background-color:#FFFFFF;
            }
            #imge {
                display:none;
            }
            #vist {
                color:grey;
                border:2px solid yellow;
                background-color:orange;
                padding:4px;
                border-radius:14px;
                text-align:center;
            }
            a {
                text-decoration:none;
                color:#52CCCC;
            }
            #saved {
                position:absolute;
                top:600px;
                border:4px solid blue;
                border-radius:4px;
                padding:4px;
                color:#99CCFF;
                background-color:#5C7A99;
                text-align:center;
            }
            #btns {
                position:relative;
                left:400px;
            }
            button {
                background-color:#66FFFF;
                box-shadow:3px 3px 3px #327D7D;
            }
            button:hover {
                cursor:pointer;
                background-color:#47B2B2;
            }
            body {
                background-image: url(http://fredfigglehorn.com/wp-content/themes/fred/images/sky-bg.jpg);
            }
            .animate-rotate {
                -moz-transition: all .4s ease-in-out;
                -o-transition: all .4s ease-in-out;
                -webkit-transition: all .4s ease-in-out;
                -moz-transition: all .3s ease-in-out;
            }
            #info, #leinfo {
                position:absolute;
                top:10px;
                font-family:Viner Hand ITC;
                font-size:19px;
                background-color:#CCFF66;
                border:3px solid #A3CC52;
                border-radius:12px;
                padding:5px;
            }
            #info:hover {
                cursor:pointer;
            }
            #leinfo {
                top:60px;
                padding:10px;
                display:none;
            }
        </style>
    </head>
    <body>
    <div id='btns'>
        <button class='animate-rotate' type="button">Pen</button>
        <button  class='animate-rotate' type="button">Line</button>
        <button  class='animate-rotate' type="button">Rect</button>
        <button  class='animate-rotate' type="button">Circle</button>
        <button  class='animate-rotate' type="button">Square</button>
        <button  class='animate-rotate' type="button">Save</button>
        <button  class='animate-rotate' type="button">Clear</button>
        <button  class='animate-rotate' type="button">Open</button>
        <button  class='animate-rotate' type="button">Delete All</button>
    </div>
    <canvas id="paint" width="500px" height="500px"></canvas>
    <ul onclick="ulclick()" style="
    position: absolute;
    top: 15px;
    left: 550px;"><span id="saved">Saved Images(Click to Refresh)</span>
    </ul>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'>
    </script>
    <script src="script.js"></script>
    <p id='vist'>Made By: <a href='https://github.com/nil1511'>Nilesh Suthar</a>, and <a href='codecademy.com/users/coder3002'>Me</a>!</p>
    <div id='info'>Credits</div>
    <div id='leinfo'><b>JavaScript</b>: Nilesh Suthar and Me <br> <b>jQuery</b>: Me <br> <b>Background-Image</b>: Fred Figglehorn</div>
    </script>
<script> 
    $(document).ready(function(){
      $("#info").click(function(){
        $("#leinfo").slideToggle("slow");
      });
    });
</script>
</body>
</html>
var x1, y1, x2, y2l, d = 4;
var img, o;
var canvasid = document.getElementById("paint");
var can = $("canvas")[0].getContext("2d");
var local = window.localStorage;
$(function () {
    $("button").click(function (e) {
        //console.log(e.currentTarget.textContent);
        switch (e.currentTarget.textContent) {
        case "Line":
            {
                d = 0;
                break;
            }
        case "Rect":
            {
                d = 1;
                break;
            }
        case "Circle":
            {
                d = 2;
                break;
            }
        case "Square":
            {
                d = 3;
                break;
            }
        case "Pen":
            {
                d = 4;
                break;
            }
        case "Save":
            {
                img = canvasid.toDataURL();
                var name = prompt("Give a name to the file", "file");
                local.setItem(name, img);
                break;
            }
        case "Clear":
            {
                can.clearRect(0, 0, canvasid.width, canvasid.height);
                break;
            }
        case "Open":
            {

                var name = prompt("File to open", "File Name");
                o = new Image();
                o.src = local.getItem(name);
                if (o.src == "") {
                    alert("Invalid File");
                    break;
                }
                can.clearRect(0, 0, canvasid.width, canvasid.height);
                can.drawImage(o, 0, 0);
                break;
            }
        case "Delete All":
            {
                local.clear();
                break;
            }
        }
    });
    $("#paint").mousedown(function (e) {
        x1 = e.pageX - this.offsetLeft;
        y1 = e.pageY - this.offsetTop;
        can.beginPath();
        can.moveTo(x1, y1);
    });
    $("#paint").mousemove(function (e) {
        if (d == 4 && e.which) {
            x2 = e.pageX - this.offsetLeft;
            y2 = e.pageY - this.offsetTop;
            can.lineTo(x2, y2);
            can.stroke();
        }
    });
    $("#paint").mouseup(function (e) {
        if (d == 4) return;
        x2 = e.pageX - this.offsetLeft;
        y2 = e.pageY - this.offsetTop;
        switch (d) {
        case 0:
            {
                can.lineTo(x2, y2);
                break;
            }
        case 1:
            {
                can.rect(x1, y1, Math.abs(x2 - x1), Math.abs(y2 - y1));
                break;
            }
        case 2:
            {
                var r = Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2);
                r = Math.sqrt(r);
                can.arc(x1, y1, r, 0, 2 * Math.PI, true);
                break;
            }
        case 3:
            {
                can.rect(x1, y1, Math.abs(x2 - x1), Math.abs(x2 - x1));
                break;
            }
        }
        can.stroke();
    });
});

function ulclick() {
    $("ul").html('<span id="saved">Saved Images(Click to Refresh)</span>');
    for (var i = 0; i < local.length; i++) {
        $("ul").append('<li onclick=loadcan(this)>' + local.key(i) + '</li>');
    }
}

function loadcan(elem) {
    can.clearRect(0, 0, canvasid.width, canvasid.height);
    o = new Image();
    o.src = local.getItem(elem.innerHTML);
    can.drawImage(o, 0, 0);
}
Created from scratch
743 forks
42198 views

Browse more Codebits