CODEWITHSUNDEEP
javascripthtml5-canvas
Mia Davis
Mia Davis

Reputation: 131

How to make putImageData cover the entire canvas

I use getImageData from a canvas and display it on another canvas using putImageData. But it doesn't cover the entire canvas.It displays the picture in its original size.Is there a way to make the cropped picture cover the whole canvas.Thank you in advance.Both canvases are 300 by 300 in size.

var c =  document.getElementById("area_c");
var c2 =  document.getElementById("area_c2");

var ctx = c.getContext("2d");
var ctx2 = c2.getContext("2d");

var imgData = ctx.getImageData(tx,new_ty ,x, new_y);
ctx2.putImageData(imgData, 0, 0);

Upvotes: 1

Views: 239

Answers (1)

rafaelcastrocouto
rafaelcastrocouto

Reputation: 12161

In this snippet you can see how to scale another canvas with css (I used a string instead of an image to avoid CORS)

I also added a class if you want to use nearest-neighbor or pixelated

var c =  document.getElementById("area_c");
var c2 =  document.getElementById("area_c2");

var ctx = c.getContext("2d");
var ctx2 = c2.getContext("2d");

var w = 150;
var h = 70;

c.width = w;
c.height = h;

ctx.font = "50px Arial";
ctx.fillText('Image',0,50);

var x = 5;
var y = 15;

var cw = 60;
var ch = 35;

c2.width = cw;
c2.height = ch;

var scale = 2;

c2.style.width = scale*cw+'px';
c2.style.height = scale*ch+'px';

var imgData = ctx.getImageData(x,y,cw,ch);
ctx2.putImageData(imgData, 0, 0);

document.querySelector('input[name=pixelate]').addEventListener('change',()=>{c2.classList.toggle('pixelate')});
canvas {
  border: 1px solid #333;
}
.pixelate {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
<canvas id="area_c"></canvas>
<canvas id="area_c2"></canvas>
<input name="pixelate" type="checkbox"><label for="pixelate">Pixelate</label>

Upvotes: 1

Related Questions