I have the following JavaScript file:
var canvas = document.getElementById('Canvas'),
context = canvas.getContext('2d'),
image = new Image();
image.src = 'abc.jpg';
image.onload = function(){
var cols = image.width;
var rows = image.width;
canvas.width = cols;
canvas.height = rows;
context.drawImage(image, 0, 0, image.width, image.height);
};
The HTML file looks as follows:
<html>
<head>
<title>chapter1</title>
<script src="matrix.js">
</script>
</head>
<body>
<canvas id="Canvas"></canvas>
</body>
</html>
But, when I try to view the HTML page, I don't see the image, provided that all the files including the image are in the same directory.
What am I doing wrong?
Thanks.