DEV Community

Cover image for Day 2/100
Cameron Thompson
Cameron Thompson

Posted on • Edited on • Originally published at cameronthompson.io

Day 2/100

Start Time: 4:30pm

Decided to change pace and work on something new, the HTML Canvas. While coding for day 2, I decided to change it up and play with html canvas and javascript to see what I can do. I am trying to make a rocket "fly" when the mouse is over the canvas. I used classes in Javascript instead of objects (I really wanted to stretch myself). I also got the code to listen for key presses so I could control the rocket across the screen. I found an example here about getting an object to move within the canvas. This example uses the mouseover and mouseout events to perform the animation, but when the mouse is over the canvas the rocket disappears. It isn't until the mouseout event happens that the rocket comes back into view (in a different spot). What could be the cause of this? Where are my shortcomings? Here is the repo with the code:

Repo: https://github.com/cdthomp1/javascript-sandbox

Live Site: https://cdthomp1.github.io/javascript-sandbox/

End Time: 6:10 pm

Top comments (0)