How can I get a canvas image into a function?

Question

 var formElement2 = document.getElementById("recImage");
 formElement2.addEventListener('click', recImagePressed, false);

 function recImagePressed(e){
     var outputCanvas = document.getElementById("outputCanvas");
     outputCtx = outputCanvas.getContext('2d');
     outputCTX.draw();
     outputCtx.drawImage(canvas2, 0, 0);
 }

 function draw() {   
            img = new Image();  
            **img.src = context2.canvas2.toDataURL();** 
            fr1 = makeFrame(context2, makeVect(400,0), makeVect(400, 0), makeVect(0, 400));
            img.onload = function(){ 
                context2.save(); 
                newPainter = cornerSplit(imagePainter,5);
                newPainter(fr1);     
                context2.restore();
                context2.save();
                newPainter(flipHorizLeft(fr1));
                context2.restore();
                context2.save();
                newPainter(flipVertDown(fr1));  
                context2.restore();
                context2.save();
                newPainter(flipVertDown(flipHorizLeft(fr1)));   
            }  
        }

I think the problem lies here: img.src = context2.canvas2.toDataURL();

the methods that are being called have been tested and work independently of this particular block of code.

any information on the used language would be very helpfull ... java? — DarkSquirrel42, Nov 26 '11 at 02:21
http://stackoverflow.com/questions/934012/get-image-data-in-javascript — Theo.T, Nov 26 '11 at 02:57

score 1 · Answer 1 · edited May 23 '17 at 10:08

1

You don't have a variable named context2 declared anywhere. This is the (first) reason that what you have doesn't work.

What are you trying to do? Draw an image to a canvas?

edited May 23 '17 at 10:08

Community

1
1

answered Nov 26 '11 at 14:24

Phrogz

296,393
112
651
745

What Im trying to do - Using these .js functions [link](http://edison.suu.edu/~grady/functional-javascript/picture-language.html) – MCGRAW Nov 26 '11 at 17:26
@Phrogz--using the above functions on a user created image-->Heres what I have working, maybe seeing this will help-- Thanks [link](http://mcgrawtheseeker.com/) – MCGRAW Nov 26 '11 at 17:35

score 0 · Answer 2 · answered Nov 26 '11 at 04:04

0

img.src = context2.canvas2.toDataURL();

doesn't make any sense. A canvas context doesn't have a property called canvas2. Either use the variable canvas2 if it exists or use context2.canvas.

Its hard to tell what you want to do since img isn't even used, but if you are trying to draw one canvas to another at some point you can use drawImage with a canvas as the argument, so if thats what you're trying to do you don't have to make an image and use toDataUrl at all.

answered Nov 26 '11 at 04:04

Simon Sarris

62,212
13
141
171

I have the user generated canvas image in one window, I want to be able to retrieve that image, run through the abouve 'draw' function when the user clicks the recImagePressed button-- you can see whats working so far at [link](http://mcgrawtheseeker.com/)---thanks for responding – MCGRAW Nov 26 '11 at 17:48

How can I get a canvas image into a function?

2 Answers2