I found this issue while working on a HTML5 app, with multibrowser support. The issue happens both in firefox and chrome 5.0.3. I've a png image that is 480x268 and I tried to render it on a offscreen canvas this way (jQuery is involved):
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src = "js/jquery-1.4.2.js"></script>
<script type="text/javascript">
jQuery(window).bind("load", function() {
var elem = $("<canvas>", {width:300, height:300});
var canvele = elem[0];
var imm = new Image();
imm.src = "card1/mask-x-6.png";
imm.onload = function(){
var ctx = canvele.getContext('2d');
ctx.drawImage(imm, 0,0);
$('body').append(elem);
}
});
</script>
</head>
<body>
</body>
</html>
the result is that the image gets drawn extremely stretched, instead of it's real size. Even trying to manually setting the size using
ctx.drawImage(imm, 0, 0, imm.width, imm.height)
doesn't work but results in further stretching. If I insert the Canvas element in the page by coding it in HTML (no using JS), the problem doesn't happen. Why is this happening? What are the issues of using canvas outside the main DOM three? How can I solve this problem?[/code]