Самый простой способ - сделать clip на основе текущей выбранной рамки кропа и зарядить ctx.drawImage(img, 0, 0, width, height ) повторно - отрисуется только тот квадратик, который в клипе.
Набросок:
...
ctx.save();
ctx.beginPath();
ctx.rect(posX, posY, this.state.w, this.state.h);
ctx.clip();
ctx.drawImage(img, 0, 0, width, height );
ctx.restore();
...
Плюс этого способа - не придется морочить голову сдвигами и размерами (если картинка не сжимается в размерах и рисуется как есть, то всё просто, иначе надо правильно подобрать параметры для самой полной версии drawImage, что слегонца геморно. Хотя, впрочем, спозиционировать установленную рамку на реальную картинку всё равно придется, так что можно и сразу это делать)