In my ASP.NET MVC application, I am trying to put together a page where a user can both sign and print their name once at a workstation equipped with a Wacom. The signatures will be saved to PNGs with links in a database and then stamped in the designated area of each form, upon user approval. With just one signature canvas, the process works flawlessly.
But even with 2 separate Javascript files, I can get one canvas working fine, but cannot get the other canvas to draw.
If I split the canvases onto 2 different pages, they each work fine separately. I can do that, but would rather have them both on one page.
I know I am missing something regarding Javascript or canvas, probably simple, but I don't know what it is.
Here is the Plunker: http://plnkr.co/edit/FsFUxIFdNUyNmluLAZJn
Recommended Answers
Jump to PostYour JavaScripts are over-writing each other. Wrap them in anynomous functions, like so :
http://plnkr.co/edit/B6265864pZhZOsXGkBqL?p=preview
Basically, you want to wrap your entire JS in
(function(){ ..... your code ..... })(); …
Jump to PostOh my - I haven't looked at that yet - I can tomorrow, it's midnight here in South Africa and I get up at 04:50am!
Jump to PostWhat is very interesting is that with http://plnkr.co/edit/0CTsA0Co4CBatiluSEwA?p=preview, I get to see that the canvas is cleared, but then something ELSE happens! That is the cause of the failure, I am missing something …
All 9 Replies
Your JavaScripts are over-writing each other. Wrap them in anynomous functions, like so :
http://plnkr.co/edit/B6265864pZhZOsXGkBqL?p=preview
Basically, you want to wrap your entire JS in
(function(){
..... your code .....
})();
This will protect the methods from each other. When I do that, I have two working canvas elements.
Thanks so much Ewald, that did it. I can't believe I didn't see that.
Now I am trying to get the "Clear" buttons to only clear their respective canvases, but each button clears both canvases.
I've tried inside anon, outside anon, in separate anons, etc..
Maybe your eyes can see something mine cannot again.
http://plnkr.co/edit/KLp3eT19QN2aUGFzh4bg?p=preview
Oh my - I haven't looked at that yet - I can tomorrow, it's midnight here in South Africa and I get up at 04:50am!
That's just fine. I can't tell you how much I appreciate another set of eyes looking at this. BTW, I hope you got some sleep...
I may be wrong, but after re-evaluating the problem, I think it is not that the "Clear" buttons clear both canvases - I think upon clicking either button, the anonymous functions reload and both canvases are reset to their initial values, which is a default blank canvas. What say you?
I was wondering, each set of elements (canvas and 2 buttons) have their own different IDs (one for print, one for sign), and each js file is calling them by id in code. Why were they overwriting each other in the first place?
Hey, I got it figured out - in the Clear function, I was calling the context instead of the canvas element. Thanks again for your help, and I hope you get a nap in later (or maybe sleep in tomorrow :).
What is very interesting is that with http://plnkr.co/edit/0CTsA0Co4CBatiluSEwA?p=preview, I get to see that the canvas is cleared, but then something ELSE happens! That is the cause of the failure, I am missing something obvious, I just know it.
Yes, I don't know why there is a server error on Plunker. The code works great here, and I don't get any server issues showing up in Fiddler2.
Excellent! It was an interesting question!
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.