Document Signature App with Canvas - Pen Colors

JavaScript
Transcript

English (Auto-generated)

now let's allow a user to sign with blue digital ink and here in html if we go to index dot html file, we see that we have these two input type radio elements and one represents the blue ink and the other one represents one for the default black colored uh signature. So they have the same name attribute which is color input, the input type. The first one has a value of blue idea of blue and the second input type radio button here has this value of black idea of black. So let's go ahead and work on this. So move on to script dot Js and we'll work on this part in the draw function itself with a simple if else, conditional statement. So what we'll do is that we will within here after moved to we'll say well if and then structure if else conditional statement. So if document dot get element by ID D. And the I. D. That we want to get this blue. So we are now referencing this input type out here. This radio which has a value of blue. So we're saying if this element this element is checked, right? So if it's checked and so strictly equal to the bullying. True. Then we want to say okay. All right, context got um stroke style. Right? So the color so stroke style is equal to blue. And one thing I noticed is that instead of context here it should actually be um C. T X. So let's just change that because remember we're not passing this global context variable. We are using this program representation up here so just bear with me I just realized that we should change it. So silly mistake but go ahead and change this from context to see the X. Okay. Right. So if the blue radio button is checked then change the stroke style to blue, else the stroke stroke trial style is just the default black color. Right? Okay. So now let's go ahead and then I'm going to control s to save and let's see if I can just try it here. So blue, I'm choosing blue and there you go. So blue ink and then black maybe if I do it here and control are to refresh. So let me go ahead and choose blue. There you go. So I have this nice blue color if I choose black and now this should the color of my strokes should be black. Right? So that's all for this code cast. Right. We added a way for users to sign with blue or black ink and remember I also changed it from context context because it was referencing this global variable. I changed it to C T X. Right. Which is actually the correct representation as it matches this parameter up here. Now moving on in the last podcast, what we'll do is we will work on a local storage so we'll actually use the local storage Api so that when I signed my name and then even if I refresh the browser window, my signature is still persist in this browser.
165 Views 0 Likes 0 Comments

Let's allow a user to sign with blue digital ink!

Comment
Leave a comment (supports markdown format)