praveen Posted June 28, 2013 Share Posted June 28, 2013 Is there any way to increase the height of image created using HTML5 canvas putImagedata. <!DOCTYPE html><html><body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas> <script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="red";ctx.fillRect(10,10,50,50); function copy(){var imgData=ctx.getImageData(10,10,50,50);ctx.putImageData(imgData,10,70);}</script> <button onclick="copy()">Copy</button> </body></html> Quote Link to comment Share on other sites More sharing options...
Juz Posted July 2, 2013 Share Posted July 2, 2013 Scaling with putImageData will need another canvas element, it is easier to use drawImage so your example the copy function might just be - {ctx.drawImage(c,10,10,50,50,10,70,new width,new height);} with new width and height being the scaled values you want. (edit: this should be in 2D forum ) Quote Link to comment Share on other sites More sharing options...
@99golems Posted July 12, 2013 Share Posted July 12, 2013 I think an easier way would be to create a new off-screen canvas with the new dimensions that you want, draw the image to it, then use that canvas as the image for whatever you need from now on. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.