canvas 그리기 예제 1

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <title>캔버스 그리기</title>
</head>
<body>
    <style type="text/css">
        canvas {border:1px solid #000;}
        #imagebox {width:500px;height:500px;display:none;}
    </style>
    <canvas id="mycanvas" width="500" height="500"></canvas>
    <div><button onclick="saveCanvasToImage()">그림저장하기</button></div>
    <div id="imagebox" title="그림저장"></div>
    <script type="text/javascript">
        var canvas, context;
        var drawing = false;
        var lastX, lastY;
        var Size = 5;
        window.onload = function(){
            canvas = document.getElementById("mycanvas");
            context = canvas.getContext("2d");
        }
        window.onmousedown = mousedown;
        window.onmousemove = mousemove;
        window.onmouseup = mouseup;
        function mousedown(event){
            var e = event || window.event;
            drawing = true;
            lastX = e.clientX;
            lastY = e.clientY;
            draw(e.clientX, e.clientY);
        }
        function mousemove(event){
            if(drawing){
                var e = event || window.event;
                draw(e.clientX, e.clientY);
            }
        }
        function mouseup(event){
            var e = event || window.event;
            drawing = false;
            draw(e.clientX, e.clientY);
        }
        function draw(x,y){
            context.lineWidth = Size;
            context.beginPath();
            context.moveTo(lastX, lastY);
            context.lineTo(x, y);
            lastX = x;
            lastY = y;
            context.closePath();
            context.strokeStyle = "#000000";
            context.stroke();
        }
        function saveCanvasToImage(){
            var image = new Image();
            image.src = canvas.toDataURL("image/png")
            $("#imagebox").html('<img src="'+image.src+'" border="1">');
            $("#imagebox").dialog({
                width:550,
                height:580
            });
        }
    </script>
</body>
</html>