Below is the Javascript code snippet:
<%-- script to load the default image--%>
<script type="text/javascript"><!--
window.addEventListener('load', function () {
// Get the canvas element.
var elem = document.getElementById('mycanvas');
if (!elem || !elem.getContext) {
return;
}
// Get the canvas 2d context.
var context = elem.getContext('2d');
if (!context || !context.drawImage) {
return;
}
// Create a new image.
var img = new Image();
// Once it's loaded draw the image on the canvas.
img.addEventListener('load', function () {
// Crop and resize the image: sx, sy, sw, sh, dx, dy, dw, dh.
context.drawImage(this, 0, 0, 400, 300);
}, false);
var imgid = '<%=defaultImage.ClientID %>'
img.src = document.getElementById(imgid).src;
}, false);
// --></script>
In the above code snippet, note that the img.src at the very bottom loads the defaultImage.ClientId from the server to display the image on the page. However, when using
document.getElementById(imgid).src