HTML5 – day 3

event.clientX & event.clientY  – location

 

var c = null;
var cx = null;

var image = null;
var isDrawing = null;
var imagefile = null;

window.onload = function(){

    var mousepos = (x:101,y:101);
    c = document.getElementById(“canv”);
    cx = c.getContext(“2d”);
    imagefile = “singaporew.jpg”;
    image = new Image();
    image.src = imagefile;
    isDrawing = false;
    c.onmousemove = function(){
        mouse[“x”] = event.clientX;
        mouse[“y”] = event.clientY;
        if(isDrawing){
            draw(mousepos);
        }
    }
}

function draw(mousepos){

    cx.globalAlpha = .9;
    cx.globalCompositeOperation = “destination-atop”;
    cx.fillStyle = “#ababab”;
    cx.fillRect(0,0, c.width, c.height);
    cx.drawImage(image,0,0);
    cx.globalAlpha = 1.0;
    cx.shadowBlur = 0;
    cx.shadowOffsetX = 10;
    cx.shadowOffsetY = 1;
    cx.beginPath();
    cx.arc(mousepos.x,mousepos.y, 80,0,Math.PI*2,false);
    cx.closePath();
    cx.fill();
}

I won’t put the html code here cause it’s incomplete. :-/ sorreh.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s