javascript - Copy user selection from one canvas to another -

javascript - Copy user selection from one canvas to another -

i'm trying implement simple, select area on canvasa , re-create area canvasb, i've got selection part working drawing of copied area doesn't want work. thought user select area , selection appear on canvas when finish selection, i.e. mousedown, drag rectangular area, mouseup (copy appears)

i confess i'm not much of front end end developer fear i'm missing obvious how stuff works i'm trying knock prove concept , understand basics @ moment.

jsfiddle here - http://jsfiddle.net/bw4gw83a/2

html

<canvas id="original" width=300 height=300></canvas> <canvas id="copybit" width=300 height=300></canvas>

javascript

var original = document.getelementbyid("original"); var ctxoriginal = original.getcontext("2d"); var copybit = document.getelementbyid("copybit"); var ctxcopybit = copybit.getcontext("2d"); var background = new image(); background.src = "https://i.imgur.com/f1pjym1.jpg"; background.onload = function(){ ctxoriginal.drawimage(background, 0, 0) } var imagedata = ctxoriginal.getimagedata(10, 10, 100, 100); ctxcopybit.putimagedata(imagedata,0,0);

any pointers appreciated.

si

the next guide might helpful.

http://www.i-programmer.info/programming/graphics-and-imaging/2078-canvas-bitmap-operations-bitblt-in-javascript.html

it mentions can draw section of image using

drawimage(image,sx,sy,sw,sh,dx,dy,dw,dh)

where s source, , d destination.

from there have determine position of click , drag work out co-ordinates , width/heights.

i've updated fiddle demonstrate. it's crude, click 1 time somewhere in top left of image, click 1 time again somewhere in bottom right.

http://jsfiddle.net/treerock/1zpc8fz0/

javascript jquery canvas html5-canvas