Html2canvas is not working on an element who's css has been altered

JavaScript
1

I’ve made a simple typewriter program that accepts keyboard input to append colored divs to the screen. I added the option to change the size of the divs from large, medium, to small as well as the size of the element containing them. The problem I ran into was that simply altering the divs to have a different size would not work as they did not exist when the page loaded. I found a way to make it work by changing the actual stylesheet. Now I am trying to allow the final creation to be saved as an image using html2canvas. It simply will not recognize the size change of the divs. Here is the link so you can see what I mean: The Color Typewriter
And here is my JavaScript: MyScripts

1 Like
2

Hey Katrina (I know her IRL :slight_smile: )

Your issue is that the number key codes are 48-57. Your sounds aren’t working because the audio files you create start at 65, thus any references to the keycodes below that are undefined.

Also, the numbers not pressing down like you want is also due to this.

 for (i = 48; i < 223; i++) { // clones audio for every key to allow overlap
      $("#typing")
       .clone()
        .attr("id", "typing-" + i)
        .appendTo($('body'));
      };

You need to change your for loop to 48 like in my example .

3

Actually spacebar sound isn’t working either because that keycode is even lower than 48. So you essentially just need to lower your for loop i variable. Starting at 48 will allow numbers to work but I think the spacebar is 32? Someone can probably optimize that script.

For everyone else, beware since this is for college. It’s basically homework.

4

Thanks, Ryan. I’m pretty sure I had the key codes right originally, but somehow I messed it up when I was trying different things out. I’m still trying to figure out the problem with html2canvas. There’s not a lot of clear documentation out there for it.

And yes this is a college project. It definitely could be optimized more, but since it is due Wednesday, I’m just trying to get all the features in there working. Afterwards, I’d like to work on it more and even register a domain for it.

5

Update: I was using alpha version 5.0 of html2canvas and just tried using release version 4.1. It is rendering the different size pixels correctly now, although there are odd gaps between each one. I’m going to chalk this up to limitations of the script for now.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.