canvas image size in html5

Question

var canvas = document.getElementById("canvasPnl");
var context = canvas.getContext('2d');
var locationtxt = "Latitude: " + position.coords.latitude + ", Longitude: " + position.coords.longitude;
var imageObj = new Image();
imageObj.src = document.getElementById("tempImg").src;
imageObj.onload = function () {
    var x = 188;
    var y = 30;
    var width = 200;
    var height = 137;
    context.drawImage(imageObj, x, y, width, height);
    context.font = "20pt Calibri";
    context.fillText(locationtxt, 40, 40);
};

<canvas id="canvasPnl" width="132" height="120" style="border:0px solid #d3d3d3;"></canvas>

The size of the image is becoming bigger and it is not fitting in canvas and also the image is rotated.

How to get original image in canvas?

you have provided width and height of image (200, 137) greater than width and height of canvas (132, 120) and also you have given the starting point to draw the image as (x=188, y=30) which is lying outside the canvas — Uttara
– Uttara, Commented Apr 2, 2013 at 6:03
Try to change the height and width in imageObj.onload function. because it is specifying the image height width which are greater thn the canvas size u have specified. on either cases, make them equal, the canvas height width and the image height width.. let me know what happens... — Hiren Pandya
– Hiren Pandya, Commented Apr 2, 2013 at 6:04
i fixed the changes like u said that is i did height and width same to both canvas and image still the result is same :( — SSS
– SSS, Commented Apr 2, 2013 at 6:09
give (x=0, y=0) as I said your drawing point is lying outside the canvas — Uttara
– Uttara, Commented Apr 2, 2013 at 6:10

markE · Accepted Answer · 2013-04-02 15:39:18Z

3

Ok, take a look at your reworked code below.

Notice "imageObj.src = document.getElementById("tempImg").src;" must go after imageObj.onload.

I have no access to your locationtxt or your tempImg, so I assume you are sure they are not the source of your problem.

This line of code will take an image of ANY size and force it to fit in your specified canvas size by scaling it. When it scales, you may get image distortion if your canvas size is not proportional to your image size.

context.drawImage(imageObj,0,0,imageObj.width,imageObj.height,0,0,canvas.width,canvas.height);

Here is your code -- just modified a bit :)

var canvas = document.getElementById("canvasPnl");
var context = canvas.getContext('2d');
var locationtxt = "Latitude: " + position.coords.latitude + ", Longitude: " + position.coords.longitude;
var imageObj = new Image();
imageObj.onload = function () {
    context.drawImage(imageObj,0,0,imageObj.width,imageObj.height,0,0,canvas.width,canvas.height);
    context.font = "20pt Calibri";
    context.fillText(locationtxt, 40, 40);
};
imageObj.src = document.getElementById("tempImg").src;

edited Apr 2, 2013 at 15:39

answered Apr 2, 2013 at 6:11

markE

106k11 gold badges174 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SSS Over a year ago

no now it is displaying 2 images one with text and one with image

Hussy Borad · Accepted Answer · 2014-04-15 10:34:26Z

<html>
<head>
    <title></title>
</head>
<style type="text/css">
#mycanvas
{
border: 1px solid black;
}
</style>
<script type="text/javascript">
window.addEventListener('load', function () {
  var img = new Image, ctx = document.getElementById('myCanvas').getContext('2d');
  var img1=new Image;
  img.src = 'ship.png';
  img1.src='3D025.jpg';
  img.addEventListener('load', function () {
     var width = img.naturalWidth; // this will be 300
  var height = img.naturalHeight; // this will be 400

    var interval = setInterval(function() {
      var x = 260, y = 0;

      return function () {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.drawImage(img1, 0, y);
        ctx.drawImage(img, x, 300,width,height);

        x += 1;
        if (x > ctx.canvas.width) {
          x = 260;
         width=width-10;
         height=height-10;
         ctx.drawImage(img, x, 300,width,height);
        }
        if (x == 750) {
          x = 260;

        }
      };
    }(), 1000/40);
  }, false);
}, false);

</script>

<body>

<canvas id="myCanvas" height="600" width="1000"></canvas>

</body>
</html>

Collectives™ on Stack Overflow

canvas image size in html5

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related