The ctx.drawImage function is drawing only half of the image

Question

The ctx.drawImage function is drawing only half of the image

I am attempting to upload an image and then display it on a canvas, but at the moment I can only get half of the image to render:

let picture = new Image();
picture.crossOrigin = 'Anonymous';
picture.onload = function() {
  let canvas = document.createElement('canvas'),
      ctx = canvas.getContext('2d');
  ctx.drawImage(picture, 0, 0);
  canvas.style.position = 'absolute';
  canvas.style.top = 0;
  canvas.style.left = 0;
  document.body.appendChild(canvas);
}
picture.src = 'https://s3.amazonaws.com/duhaime/blog/visualizations/word-to-viz/heightmap.jpg';

Can anyone identify what might be causing the issue in the code above? Your suggestions would be greatly appreciated!

javascript canvas

Answer 1

Answer №1

Because the canvas size is smaller than image

To ensure that the entire image is visible, adjust the canvas size accordingly.

let picture = new Image();
picture.crossOrigin = 'Anonymous';
picture.onload = function() {
  let canvas = document.createElement('canvas');
  canvas.width = picture.width;
  canvas.height = picture.height;
  let context = canvas.getContext('2d');
  context.drawImage(picture, 0, 0);
  document.body.appendChild(canvas);
}
picture.src = 'https://s3.amazonaws.com/duhaime/blog/visualizations/word-to-viz/heightmap.jpg';

If needed, you can set the canvas size using CSS without changing its dimensions (the CSS will just stretch it).

//same code as above
let picture = new Image();
picture.crossOrigin = 'Anonymous';
picture.onload = function() {
  let canvas = document.createElement('canvas');
  canvas.width = picture.width;
  canvas.height = picture.height;
  let context = canvas.getContext('2d');
  context.drawImage(picture, 0, 0);
  document.body.appendChild(canvas);
}
picture.src = 'https://s3.amazonaws.com/duhaime/blog/visualizations/word-to-viz/heightmap.jpg';

canvas{width:200px; height:100px;}

Answer 2

Because the canvas size is smaller than image

To ensure that the entire image is visible, adjust the canvas size accordingly.

let picture = new Image();
picture.crossOrigin = 'Anonymous';
picture.onload = function() {
  let canvas = document.createElement('canvas');
  canvas.width = picture.width;
  canvas.height = picture.height;
  let context = canvas.getContext('2d');
  context.drawImage(picture, 0, 0);
  document.body.appendChild(canvas);
}
picture.src = 'https://s3.amazonaws.com/duhaime/blog/visualizations/word-to-viz/heightmap.jpg';

If needed, you can set the canvas size using CSS without changing its dimensions (the CSS will just stretch it).

//same code as above
let picture = new Image();
picture.crossOrigin = 'Anonymous';
picture.onload = function() {
  let canvas = document.createElement('canvas');
  canvas.width = picture.width;
  canvas.height = picture.height;
  let context = canvas.getContext('2d');
  context.drawImage(picture, 0, 0);
  document.body.appendChild(canvas);
}
picture.src = 'https://s3.amazonaws.com/duhaime/blog/visualizations/word-to-viz/heightmap.jpg';

canvas{width:200px; height:100px;}

The ctx.drawImage function is drawing only half of the image

Answer №1

Similar questions

Submitting a Form with JQuery/AJAX and PHP

Comparing current time with a given hour string in JavaScript

Determining the decimal power using the position of a for-loop

How to invoke a function from a different ng-app in AngularJS

Utilizing Google Maps API version 3 to display various groups of markers

How can you resize a circle in Three.js without resizing its outline?

What is the best way to access the element menu with element-ui?

What is preventing array.map() from being a function?

Move information from one webpage to a different page

Steps for conducting a targeted element check within an array property in MongoDB

Identifying the pressing of the enter key in an input field

Create a form based on a bootstrap table row

Clickable headline in Boostrap 5 accordion

Ways to restrict the number of times elements are iterated in a `v-for`

Obtain asynchronous state in VueJS without the need for intricate v-if conditions

Clicking outside the box will close it

Error with SwitchMap on ActivatedRoute.paramMap

An error occurred when attempting to access the 'selectedZones' property of an undefined variable that has already been initialized and is not empty

Generate a biscuit within a text field while typing, then transmit it

Angular protection filter