CODEWITHSUNDEEP
javascriptcsshtmlcanvas
user285594
user285594

Reputation:

How can I see in canvas the whole picture original resolution, without loosing quality?

I have a random picture box (HD Pictures) now I need to copy it to a canvas without losing width, height, quality. When I tried following, in canvas I do not get the whole picture of img tag.

Why is the canvas not auto re-sizing to original image source resolution? see below plz whole picture is not showing in canvas.

enter image description here

<!DOCTYPE html>
<html>
<body>

<p>1. Random Images:</p>
<img id="scream" src="http://3.bp.blogspot.com/-ToLa13yet6E/Ugd2yrThMDI/AAAAAAAAAHY/3tAOipAts4c/s1600/tree3.jpg" alt="The Scream" width="220" height="277">

<p>2. Canvas: will show the same picture width, height</p>
<canvas id="myCanvas" 
        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");
var img=document.getElementById("scream");
ctx.drawImage(img,0,0);

</script>

</body>
</html>

Upvotes: 0

Views: 162

Answers (1)

user1693593
user1693593

Reputation:

Set first the size of the canvas, then draw the image - or - draw the image using extended arguments to fill the canvas at whatever size it is at.

Canvas defaults to 300 x 150 pixels if no size is defined:

Option 1

c.width = img.width;
c.height = img.height
ctx.drawImage(img,0,0);

Option 2:

ctx.drawImage(img,0,0, c.width, c.height);

You can also set the size on the canvas element itself (don't use CSS for this):

<canvas id="myCanvas" width=500 height=400
        style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

Upvotes: 1

Related Questions