Response title
This is preview!
I have problems generating the Canvas element with jQuery...
in Using jQuery
•
13 years ago
Hello I found an annoying problem using jQuery and Canvas. Look at the following code:
- <!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>
This is expected to draw an image, unstreched, on the canvas, then attach the canvas to body. Instead it will draw the image extremely distorted, not with its real aspect ratio. If I use the call ctx.drawImage(imm, 0, 0, imm.width, imm.height), I will have the same issues. The only way is to use standard DOM and Js methods to generate the canvas element and to attach it to the DOM. Why this is not working? Am I using jQuery in the wrong way?
1