Playing with Canvas

by salitrapraveen

HTML

<canvas id="area" width="320" height="320" style="border:1px;border-style:solid;">
</canvas><BR><BR>

CSS

//hit control+enter to run, thoda problem karega first time image dikhane becoz of image url..
//Click on canvas to access mouse click coordinates

JavaScript

var src1 = 'http://gagagadget.com/wordpress/wp-content/uploads/2010/10/google-chrome-logo-64x64.jpg';
var src2 = 'http://www.softblogger.net/wp-content/uploads/2010/05/google_earth_logo.jpg';
var src3 = 'http://www.andrewseward.com/wp-content/uploads/2009/07/linkedin-logo.png';
var src4 = 'http://www.bluebonkers.com/urlpics/IE-Logo.png';
var src5 = 'http://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/KDE_logo.svg/64px-KDE_logo.svg.png';
var src6 = 'http://www.opencampus.com/~shared/images/netscape-logo.jpg';
var src7 = 'http://www.longleafchurch.org/wp-content/uploads/2010/01/twitter-logo.png';
var src8 = 'http://happy257.webs.com/orkut_logo.png';
var src9 = 'http://www.aaauctions.com/auctions/upcoming/images/facebook-logo-64.png';
var img1 = new Image();
img1.src = src1;
var img2 = new Image();
img2.src = src2;
var img3 = new Image();
img3.src = src3;
var img4 = new Image();
img4.src = src4;
var img5 = new Image();
img5.src = src5;
var img6 = new Image();
img6.src = src6;
var img7 = new Image();
img7.src = src7;
var img8 = new Image();
img8.src = src8;
var img9 = new Image();
img9.src = src9;
var img10 = new Image();
img10.src = src1;
var img11 = new Image();
img11.src = src2;
var img12 = new Image();
img12.src = src3;
var img13 = new Image();
img13.src = src4;
var img14 = new Image();
img14.src = src5;
var img15 = new Image();
img15.src = src6;
var img16 = new Image();
img16.src = src7;
var img17 = new Image();
img17.src = src8;
var img18 = new Image();
img18.src = src9;
var img19 = new Image();
img19.src = src1;
var img20 = new Image();
img20.src = src2;
var img21 = new Image();
img21.src = src3;
var img22 = new Image();
img22.src = src4;
var img23 = new Image();
img23.src = src5;
var img24 = new Image();
img24.src = src6;
var img25 = new Image();
img25.src = src7;


var MATRIX_C = 5; //no of columns
var MATRIX_R = 5; //no of rows
var CHUNK_W =64; //width of chunk
var CHUNK_H=64; //height of chunk

function drawNewImage(blockIds) {
   
    var canvas =...