js: getImageData / putImageData how to copy image?

Question

JavaScript

I need to copy part of the image from another (which is taken from the camera, but this is not important, although no, it is important because I have to work with the camera in firefox)
I make 2 canvases:

<canvas id="canvas" width="320" height="240" ></canvas>
<canvas class="target" id="m0"  width="320" height="240"></canvas>

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var cms = document.getElementById('m0');
var target = cms.getContext('2d');

In context, everything comes from the camera wonderfully.
You need to tear a piece out of it .. for example [0, 0, 10, 10], context is, of course, larger.

context.drawImage(video, 0, 0, canvas.width, canvas.height); // тут все работает.
var data = context.getImageData(0, 0, 320, 240).data; // в data попадает одномерный массив.
target.putImageData(data,0,0,10,10); // фигушки.

An error pops up:
TypeError: Not enough arguments to CanvasRenderingContext2D.putImageData.
https://jsfiddle.net/gsdLxxz5/

Answer 1

putImageData () has two signatures: 3 arguments or 7 arguments:

ctx.putImageData(imagedata, dx, dy);
ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);

var pixels = context.getImageData(0, 0, 320, 240);
var data = pixels.data; // в data попадает одномерный массив.
target.putImageData( pixels, 15, 15, 0, 0, 10, 10);
/*
15, 15 – где разместить (отступив по 15px слева сверху в target'е)
0, 0 – откуда копировать в координатах context'а
10, 10 – ширина, высота региона копирования
*/