how to zoom imageData

Question

How to zoom imageData? I have 160x200 imageData object, now I want to display it 640x400. This must be quick, because done each rendering step.

 var imgData = ctx.createImageData(160,200)
 .....

score 1 · Answer 1 · answered Jul 05 '15 at 21:11

1

Did you try putImageData and scale with redrawing?

ctx.putImageData(imgData, 0, 0);
ctx.scale(4, 2);
canvas.width = 640;
canvas.height = 200;
ctx.drawImage(canvas, 0, 0);

answered Jul 05 '15 at 21:11

Paulius Sapragonas

176
8

1

Now i remember you cannot scale existing drawing, only new drawing can scaling you can read about this problem more here: http://stackoverflow.com/questions/24429830/html5-canvas-how-to-change-putimagedata-scale – Paulius Sapragonas Jul 05 '15 at 21:26

score 0 · Answer 2 · answered Jul 06 '15 at 10:05

First solution is to use an intermediate canvas.
However, you can avoid using another canvas by just drawing on the main canvas and by using drawImage in its 9 arguments flavor :

var ctx=cv.getContext('2d');

// clear canvas
ctx.fillStyle = '#FFF';
ctx.fillRect(0,0,640, 400);

// draw a circle in the 160X200 part
ctx.fillStyle = '#000';
ctx.beginPath();
ctx.arc (80,100, 80, 0, 6.28)
ctx.fill();

// retrieve image data
var imD = ctx.getImageData(0,0,160,200);

// clear canvas
ctx.fillStyle = '#FFF';
ctx.fillRect(0,0,640, 400);

// --------------------

ctx.putImageData(imD, 0, 0);
ctx.drawImage(cv, 0,0, 160, 200, 0, 0, 640, 400)

  <canvas id='cv' width=640 height=400></canvas>

how to zoom imageData

2 Answers2