// canvas template

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");


// draw line
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.moveTo(100, 150);
context.lineTo(450, 50);
context.lineWidth = 15;
context.strokeStyle = "#ff0000"; // line color
context.stroke();


// draw arc

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 75;
var startingAngle = 1.1 * Math.PI;
var endingAngle = 1.9 * Math.PI;
var counterclockwise = false;

context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);
context.lineWidth = 15;
context.strokeStyle = "black"; // line color
context.stroke();


// draw curve

 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 var controlX = 288;
 var controlY = 0;
 var endX = 388;
 var endY = 150;

 context.moveTo(188, 150);
 context.quadraticCurveTo(controlX, controlY, endX, endY);
 context.lineWidth = 10;
 context.strokeStyle = "black"; // line color
 context.stroke();



// draw bezier
var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 var controlX1 = 140;
 var controlY1 = 10;
 var controlX2 = 388;
 var controlY2 = 10;
 var endX = 388;
 var endY = 170;

context.moveTo(188, 130);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
context.lineWidth = 10;
context.strokeStyle = "black"; // line color
context.stroke();


// draw path
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.beginPath();
context.moveTo(100, 20);
context.lineTo(200, 160); // line 1
context.quadraticCurveTo(230, 200, 250, 120); // quadratic curve
context.bezierCurveTo(290, -40, 300, 200, 400, 150); // bezier curve
context.lineTo(500, 90); // line 2
context.lineWidth = 5;
context.strokeStyle = "#0000ff";
context.stroke();


// draw rectangle

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var topLeftCornerX = 188;
var topLeftCornerY = 50;
var width = 200;
var height = 100;

context.beginPath();
context.rect(topLeftCornerX, topLeftCornerY, width, height);
context.fillStyle = "#8ED6FF";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();


// draw pattern

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var imageObj = new Image();
imageObj.onload = function(){
    var pattern = context.createPattern(imageObj, "repeat");

    context.rect(10, 10, canvas.width - 20, canvas.height - 20);     
    context.fillStyle = pattern;
    context.fill();
};
imageObj.src = "wood-pattern.png";



// draw image
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var destX = 69;
var destY = 50;
var imageObj = new Image();

imageObj.onload = function(){
    context.drawImage(imageObj, destX, destY);
};
imageObj.src = "darth-vader.jpg";



// draw text
 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 var x = 150;
 var y = 100;

 context.font = "40pt Calibri";
 context.fillStyle = "#0000ff"; // text color
 context.fillText("Hello World!", x, y);

// draw shadow

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.rect(188, 40, 200, 100);
context.fillStyle = "#8ED6FF";
context.shadowColor = "#bbbbbb";
context.shadowBlur = 20;
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.fill();


// clear canvas

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.rect(188, 40, 200, 100);
context.fillStyle = "#8ED6FF";
context.shadowColor = "#bbbbbb";
context.shadowBlur = 20;
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.fill();



// animation

window.requestAnimFrame = (function(callback){
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback){
        window.setTimeout(callback, 1000 / 60);
    };
})();
 
function animate(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    // update
 
    // clear
    context.clearRect(0, 0, canvas.width, canvas.height);
 
    // draw
 
    // request new frame
    requestAnimFrame(function(){
        animate();
    });
}
 
window.onload = function(){
    // initialize stage
 
    animate();
};


// linear motion
window.requestAnimFrame = (function(callback){
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback){
        window.setTimeout(callback, 1000 / 60);
    };
})();
 
function animate(lastTime, myRectangle){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    // update
    var date = new Date();
    var time = date.getTime();
    var timeDiff = time - lastTime;
    var linearSpeed = 100; // pixels / second
    var linearDistEachFrame = linearSpeed * timeDiff / 1000;
    var currentX = myRectangle.x;
 
    if (currentX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
        var newX = currentX + linearDistEachFrame;
        myRectangle.x = newX;
    }
    lastTime = time;
 
    // clear
    context.clearRect(0, 0, canvas.width, canvas.height);
 
    // draw
    context.beginPath();
    context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
 
    context.fillStyle = "#8ED6FF";
    context.fill();
    context.lineWidth = myRectangle.borderWidth;
    context.strokeStyle = "black";
    context.stroke();
 
    // request new frame
    requestAnimFrame(function(){
        animate(lastTime, myRectangle);
    });
}
 
window.onload = function(){
    var myRectangle = {
        x: 0,
        y: 50,
        width: 100,
        height: 50,
        borderWidth: 5
    };
 
    var date = new Date();
    var time = date.getTime();
    animate(time, myRectangle);
};


// animation start & stop

window.requestAnimFrame = (function(callback){
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback){
        window.setTimeout(callback, 1000 / 60);
    };
})();
 
function drawRect(myRectangle){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.beginPath();
    context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
 
    context.fillStyle = "#8ED6FF";
    context.fill();
    context.lineWidth = myRectangle.borderWidth;
    context.strokeStyle = "black";
    context.stroke();
}
 
function animate(lastTime, myRectangle, animProp){
    if (animProp.animate) {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
 
        // update
        var date = new Date();
        var time = date.getTime();
        var timeDiff = time - lastTime;
        var linearSpeed = 100;
        // pixels / second
        var linearDistEachFrame = linearSpeed * timeDiff / 1000;
        var currentX = myRectangle.x;
 
        if (currentX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
            var newX = currentX + linearDistEachFrame;
            myRectangle.x = newX;
        }
        lastTime = time;
 
        // clear
        context.clearRect(0, 0, canvas.width, canvas.height);
 
        // draw
        drawRect(myRectangle);
 
        // request new frame
        requestAnimFrame(function(){
            animate(lastTime, myRectangle, animProp);
        });
    }
}
 
window.onload = function(){
    var myRectangle = {
        x: 0,
        y: 50,
        width: 100,
        height: 50,
        borderWidth: 5
    };
 
    /*
     * make the animation properties an object
     * so that it can be modified by reference
     * from an event
     */
    var animProp = {
        animate: false
    };
 
    // add click listener to canvas
    document.getElementById("myCanvas").addEventListener("click", function(){
        if (animProp.animate) {
            animProp.animate = false;
        }
        else {
            animProp.animate = true;
            var date = new Date();
            var time = date.getTime();
            animate(time, myRectangle, animProp);
        }
    });
 
    drawRect(myRectangle);
};


// mouse position
function writeMessage(canvas, message){
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.font = '18pt Calibri';
    context.fillStyle = 'black';
    context.fillText(message, 10, 25);
}
 
function getMousePos(canvas, evt){
    // get canvas position
    var obj = canvas;
    var top = 0;
    var left = 0;
    while (obj && obj.tagName != 'BODY') {
        top += obj.offsetTop;
        left += obj.offsetLeft;
        obj = obj.offsetParent;
    }
 
    // return relative mouse position
    var mouseX = evt.clientX - left + window.pageXOffset;
    var mouseY = evt.clientY - top + window.pageYOffset;
    return {
        x: mouseX,
        y: mouseY
    };
}
 
window.onload = function(){
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
 
    canvas.addEventListener('mousemove', function(evt){
        var mousePos = getMousePos(canvas, evt);
        var message = "Mouse position: " + mousePos.x + "," + mousePos.y;
        writeMessage(canvas, message);
    }, false);
};