HTML flexible canvas scale

Question

I am making a website which will load some blueprint images on a canvas.

but the images are vary in height and width.i Would like to make the canvas scaling equal to the uploaded image scale. How do i code to make the canvas width and height changeble respective to uploaded image. This done in html5

i got it working thx :) – Mohandez Remerio Xanthos May 31 '16 at 08:47 — Mohandez Remerio Xanthos, May 31 '16 at 08:47

score 1 · Accepted Answer · answered May 31 '16 at 08:25

If I understand you correctly, you want to load images with various dimensions. According to the dimension, set the width / height of the canvas and draw the image?

In that case you could add an eventListener to the image. Once it's loaded, get the width and height. Use those to set the dimensions of the canvas. After that, draw the image on the canvas.

var image = new Image();

image.addEventListener('load', function(e) {
  var width = image.width;
  var height = image.height;

  var canvas = document.querySelector('canvas');
  canvas.width = width;
  canvas.height = height;

  canvas.getContext('2d').drawImage(image, 0, 0, width, height); 
});

image.src = 'https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png';

<canvas></canvas>

Fiddle

score 0 · Answer 2 · answered May 31 '16 at 08:48

0

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
imageObj.src = 'images/e1.jpg';


canvas.width = imageObj.naturalWidth;
canvas.height = imageObj.naturalHeight;

this also works

answered May 31 '16 at 08:48

Mohandez Remerio Xanthos

49
3

But make sure to get the width/height after the image is loaded: http://stackoverflow.com/questions/1645166/image-naturalwidth-return-zero – Pimmol May 31 '16 at 09:01

HTML flexible canvas scale

2 Answers2