canvas Examples

Canvas Example Code
var noClick;
var arcMoves = 0;
var intervalId;
var startingAngle;
var endingAngle;
var centerX;
var centerY;
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
var newDate = new Date;
var tempImgName;

var a = 0;
var b = 0;        
var storeArr = []
var pro_enable = false;


$(document).ready(function(){
/*$('#geoLayout').append('
 
id="pencilIcon" />  
id="clear" />   id="eraseIcon" />
Type
Type
Radius mm
Rotate °
Submit
Submit
');
*/                    
            geoLayout = document.getElementById('geoLayout');
            clear = document.getElementById('clear');
            pageText = document.getElementById('geoLayout');


            noClick = 0      ;
            firstMove = true;

            canvas = document.getElementById('canvas');
            ctx=canvas.getContext('2d');
            ctx.beginPath();
           
            $("#geoIcon").toggle(function(){
                        $("#geoLayout").fadeIn();
                        $("#geo-thumb").show();
             },function(){
                        //$("#canvas").empty();
                        $("#canvas").css({'cursor':'default'});
                        $("#pencilDv").hide();
                        $("#compassDv").hide();
                        $("#protector").remove();
                        $("#ruler").remove();
                        //canvas = document.getElementById('canvas');
                        //ctx=canvas.getContext('2d');
                        //ctx.clearRect(0, 0, 585, 450);
                        //ctx.beginPath();
                        $("#geo-thumb").hide();
                        $("#geoTool").empty();
                        $("#geoLayout").fadeOut();
            });
           
            $("#pencilIcon").toggle(function(){
                        $("#pencilDv").show();
                        $("#eraser").remove();
                        $("#compassDv, #ProDiv").hide();
                        $("#canvas").css({'cursor':'pointer'});
                        if(pro_enable){
                                                $("#canvas").css({'z-index':'100000','position':'absolute'});
                        }
                        else {
                                                $("#canvas").css({'z-index':'0','position':'static'});
                        }
            },function(){
                        $("#canvas").css({'cursor':'default'});
                        $("#pencilDv").hide();
            });
           
var DragLeft = 0;
var DragTop = 0;
           
            $("#eraseIcon").toggle(function(){
                         $("#geoTool").append("");
                                    new webkit_draggable('eraser',{revert: false});
                                    eraseImage();
                                    $("#pencilDv").hide();
                                    $("#compassDv").hide();
            },function(){
                        $("#eraser").remove();
            });

            $('#canvas').mousedown(function(e){
                        if($("#pencilDv").css('display')=="block")
                        {         
                                    paint = true;
                                    addClick(e.pageX - eval(this.offsetLeft+geoLayout.offsetLeft), e.pageY - eval(this.offsetTop+geoLayout.offsetTop));
                                    redraw();
                        }
            });
           
            $('#canvas').mousemove(function(e){
                if((($("#pencilMode").val()).toLowerCase() == "freehand")&& ($("#pencilDv").css('display')=="block"))
                        {
                                    if(paint){
                                                addClick(e.pageX - eval(this.offsetLeft+geoLayout.offsetLeft), e.pageY - eval(this.offsetTop+geoLayout.offsetTop), true);
                                                redraw();
                                    }
                        }
            });
           
            $('#canvas').mouseup(function(e){
                         if((($("#pencilMode").val()).toLowerCase() == "freehand")&& ($("#pencilDv").css('display')=="block"))
                        {
                                    paint = false;
                                    clickX = new Array();
                                    clickY = new Array();
                                    clickDrag = new Array();
                        }
            });
           
            $('#canvas').mouseleave(function(e){
                        if((($("#pencilMode").val()).toLowerCase() == "freehand")&& ($("#pencilDv").css('display')=="block"))
                        {
                                    paint = false;
                                    clickX = new Array();
                                    clickY = new Array();
                                    clickDrag = new Array();
                        }
            });
           
            clear.onclick = function(){
                        noClick = 0;
                        storeArr = [];
                        firstMove = true;
                        next = 0;
                        ctx.clearRect(0, 0, 585, 450);
                        ctx.beginPath();
            }
            if(/iphone|ipod|ipad|android/i.test(navigator.userAgent))
                                    init();
           
});



function eraseImage(){
           
            domid = document.getElementById('eraser');
            domid.onmousemove = function(event){
                        x = event.pageX-eval(pageText.offsetLeft +15);
                        y = event.pageY-pageText.offsetTop;
                        x1 = eval(event.pageX-eval(domid.offsetLeft+geoLayout.offsetLeft))-11;
                        y1 = Number(event.pageY-eval(domid.offsetTop+geoLayout.offsetTop));
             
                        if((x>0 && x< 585) && (y > 0 && y < 450)){
                                    ctx.beginPath();
                                    ctx.moveTo(eval(x-x1)-1,eval(y+y1)-1);
                                    ctx.rect(eval(x-x1)-1,eval(y+y1)-1,2,2);
                                    ctx.lineCap='round';

                                    ctx.lineWidth = 40;
                                    ctx.strokeStyle = "#000";
                                    ctx.stroke();
                        }
            }
}

function spoting(){

            domid = document.getElementById('canvas');
            domid.onclick = function(event){
                       
                        if($("#compassDv").css('display')=="block")
                        {
                        var radius = $("#getRadius").val();
                        radius = eval(radius * 3.779527559);
                       
                        noClick ++
                                    x=        event.pageX - eval(this.offsetLeft+geoLayout.offsetLeft);
                                    y=        event.pageY - eval(this.offsetTop+geoLayout.offsetTop);
                                   
                                   
                                    if((x>0 && x< 585) && (y > 0 && y < 450)){
                                               
                                               
                                                switch (($("#compassMode").val()).toLowerCase()){
                                                            case "arc":
                                                                        arcMoves++;
                                                                       
                                                                        ctx.moveTo(x,y);
                                                                        ctx.rect(x,y,2,2);
                                                                       
                                                                        if(arcMoves == 1)
                                                                        {
                                                                                    centerX = eval(x);
                                                                                    centerY = eval(y);
                                                                                   
                                                                                    ctx.lineCap='round';
                                                                                    ctx.lineWidth = 2;
                                                                                    ctx.stroke();
                                                                                   
                                                                                    startingAngle = 0;
                                                                                    endingAngle = 6.3;
                                                                                    var counterclockwise = false;
                                                                                   
                                                                                    /*var img = new Image();
                                                                                    tempImgName = newDate.getTime() + '.png';
                                                                                    img.src = tempImgName;
                                                                                    img.id   = tempImgName;
                                                                                    ctx.drawImage(img,0,0);*/
                                                                                    ctx.beginPath();
                                                                                    ctx.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);
                                                                                    ctx.strokeStyle = "#fafafa"; // line color
                                                                                    ctx.lineWidth = 2;
                                                                                    ctx.stroke();
                                                                                   
                                                                        }
                                                                        else if(arcMoves == 2)
                                                                        {
                                                                                    startingAngle = Math.atan2(eval(y-centerY),eval(x-centerX));
                                                                                    if (startingAngle < 0)
                                                                                                startingAngle += 2 * Math.PI;
                                                                                   
                                                                                    ctx.beginPath();
                                                                                    ctx.rect(x,y,2,2);
                                                                                    ctx.lineCap='round';
                                                                                    ctx.strokeStyle = "black"; // line color
                                                                                    ctx.lineWidth = 2;
                                                                                    ctx.stroke();

                                                                        }
                                                                        else
                                                                        {
                                                                                    ctx.rect(x,y,2,2);
                                                                                    ctx.lineCap='round';
                                                                                    ctx.lineWidth = 2;
                                                                                    ctx.stroke();
                                                                                   
                                                                                    endingAngle = Math.atan2(eval(y-centerY),eval(x-centerX));
                                                                                    if (endingAngle < 0)
                                                                                                endingAngle += 2 * Math.PI;

                                                                                    var counterclockwise = false;
                                                                                    ctx.beginPath();
                                                                                    ctx.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);
                                                                                    ctx.strokeStyle = "black"; // line color
                                                                                    ctx.lineWidth = 2;
                                                                                    ctx.stroke();
                                                                                    arcMoves = 0;
                                                                        }
                                                                       
                                                            break;
                                                            case "circle":
                                                                        ctx.moveTo(x,y);
                                                                        ctx.rect(x,y,2,2);
                                                                        ctx.lineCap='round';
                                                                        ctx.lineWidth = 2;
                                                                        ctx.stroke();
                                                                                   
                                                                        centerX = x;
                                                                        centerY = y;

                                                                        startingAngle = 0;
                                                                        endingAngle = 6.3;
                                                                        var counterclockwise = false;
                                                                        ctx.beginPath();
                                                                        ctx.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);
                                                                        ctx.strokeStyle = "black"; // line color
                                                                        ctx.lineWidth = 2;
                                                                        ctx.stroke();
                                                            break;
                                                }
                                    }
                        }
            }
}
           
           
 
           
            function addClick(x, y, dragging)
            {
              clickX.push(x);
              clickY.push(y);
              clickDrag.push(dragging);
            }
           
            function redraw(){
                       
                        ctx.strokeStyle = "black";
                        ctx.lineJoin = "round";
                        ctx.lineWidth = 2;
                        if(($("#pencilMode").val()).toLowerCase() == "freehand")
                        {
                                    init();
                                    for(var i=0; i < clickX.length; i++)
                                    {         
                                                ctx.beginPath();
                                                if(clickDrag[i] && i){
                                                  ctx.moveTo(clickX[i-1], clickY[i-1]);
                                                 }else{
                                                   ctx.moveTo(clickX[i]-1, clickY[i]);
                                                 }
                                                 ctx.lineTo(clickX[i], clickY[i]);
                                   
                                                 ctx.closePath();
                                                 ctx.stroke();
                                    }
                        }
                        else if(($("#pencilMode").val()).toLowerCase() == "line")
                        {
                                    destroy();
                                    ctx.rect(clickX[0],clickY[0],2,2);
                                    ctx.lineCap='round';
                                    ctx.lineWidth = 2;
                                   
                                    if(clickX.length > 1)
                                    {
                                                ctx.rect(clickX[1],clickY[1],2,2);
                                                ctx.lineCap='round';
                                                ctx.lineWidth = 2;
                                                ctx.stroke();
                                               
                                                ctx.beginPath();
                                                ctx.moveTo(clickX[0], clickY[0]);
                                                ctx.lineTo(clickX[1], clickY[1]);
                                                ctx.closePath();
                                               
                                                paint = false;
                                                clickX = new Array();
                                                clickY = new Array();
                                                clickDrag = new Array();
                                    }
                                    ctx.stroke();
                        }
            }

           




function init(){
            var c = document.getElementById("canvas");
            c.addEventListener("touchstart",touchHandler,true);
            c.addEventListener("touchmove",function(e){e.preventDefault()},true);
            c.addEventListener("touchmove",touchHandler,true);
            c.addEventListener("touchend",touchHandler,true);
            c.addEventListener("touchcancel",touchHandler,true);
            c.addEventListener("doubletap",touchHandler,true);
}
function destroy(){
            var c = document.getElementById("canvas");
            c.removeEventListener("touchstart",touchHandler,true);
            c.removeEventListener("touchmove",function(e){e.preventDefault()},true);
            c.removeEventListener("touchmove",touchHandler,true);
            c.removeEventListener("touchend",touchHandler,true);
            c.removeEventListener("touchcancel",touchHandler,true);
            c.removeEventListener("doubletap",touchHandler,true);
}

function touchHandler(a){
            var b=a.changedTouches,c=b[0],d="";
            switch(a.type){
                        case"touchstart":
                                    d="mousedown";
                                    break;
                        case"touchmove":
                                    d="mousemove";
                                    break;
                        case"touchend":
                                    d="mouseup";
                                    break;
                        case"touchmove":
                                    d="dblclick";
                                    break;
                        default:
                                    return
            }
            var e=document.createEvent("MouseEvent");
            e.initMouseEvent(d,true,true,window,1,c.screenX,c.screenY,c.clientX,c.clientY,false,false,false,false,0,null);
            c.target.dispatchEvent(e)
}







Type2