I think krumza has a good point there: if you need to do some complex UI that involves lots of text and user input, it's probably best done in HTML if that is an option. After all, that's what HTML and CSS are made for.
You can also do it in Wade, with or without custom draw functions. But like krumza said, if it's very complex I wouldn't recommend it.
How are you using these draw functions? I can't tell if it's right or wrong without seeing the code that you've tried.
Some draw functions only work in canvas 2d mode and not in webgl. If you look in your browser's console, wade will give you a warning if you try to use a 2d-only draw function on a webgl layer. Some functions work for both 2d and webgl, but not drawRect_ for example.
In general, you can do a scrollable text box like that with an object that contains a background Sprite - with its own opacity, which you can control like this in code:
Sprite.setDrawModifiers({type: 'alpha', alpha: 0.5});
On top of that sprite, a TextSprite with some text. You will need to call TextSprite.setMaxLines(), TextSprite.setMaxWidth(), TextSprite.setLineHeight() etc. to make it fit in your box.
And finally, separate objects for the scroll bar and the up and down buttons.
If you open the Wade editor and then the repo browser (orange icon in the top bar) and scroll down to the bottom, there are a couple of repositories that contain UI graphical elements (boxes, scroll bars and buttons) that you can use to get started with that.