Animate in JavaScript

[RichM499]

I am building a website and could use your help. I am new to programming languages and so far I have learned the basics of HTML, CSS, JavaScript, Python, Ruby, PHP, and jQuery if you can count that one... I am trying to animate this happy face and I would like to make him responsive to mouse movements but I'm unsure which JavaScript library would be the best for what I want to do.

Any suggestions or information about JavaScript animation with HTML and CSS would be greatly appreciated. I'll paste my JS code in here so you can offer suggestions based on what I have done so far.


EDIT: I'm going to be researching it. I've only been doing this stuff a month or so but when I find the info I'm looking for I'll be sure to update this thread.

EDIT2: I am going to try a couple of for and while loops and see if I can come up with any animations for it )

window.onload = draw;
function draw() {
  x = prompt("Please enter your name?");
  if(true){
    
    var a_canvas = document.getElementById("canvas");
    
    var face = a_canvas.getContext("2d");

    face.fillStyle = "gold";
    face.beginPath();
    face.arc(200, 100, 40, 0, 2*Math.PI);
    //       horiz vert siz
    face.closePath();
    face.fill();
    face.lineWidth = 2;
    face.stroke();
    face.fillStyle = "black";

    var leye = a_canvas.getContext("2d");
    leye.beginPath(); // leye
    leye.arc(185, 85, 5, 0, 2*Math.PI);
    leye.closePath();
    leye.fill();

    var reye = a_canvas.getContext("2d");
    reye.beginPath(); // reye
    reye.arc(205, 92, 5, 0, 2*Math.PI);
    reye.closePath();
    reye.fill();

    var mout = a_canvas.getContext("2d");
    mout.beginPath();
    mout.arc(190, 117, 20, Math.PI, 2*Math.PI, true);
    mout.closePath();
    mout.fill();

    var context = a_canvas.getContext("2d");
    context.font = "30px Comic Sans MS";
    context.fillText("Hello, and welcome to my site " + x+" !!",112,175);
  }else{
    console.log("<p class='herp'><a href='http://www.google.com'>Google...</p></a>" + "<br />");
  }
};

 

[office politics]

i think this will help

Mouse Follower

 

[RichM499]

Thanks. It has been a while since I made this thread but I wanted you to know that some of the techniques in the tutorial you linked to were very interesting and this is exactly what I was looking for. I just need to play around with it a bit. I'm a newbie to coding but I'm really enjoying HTML5 Canvas and JavaScript. I will be learning Visual Basic, Visual C#, and Visual C++ in school soon so hopefully that will help me learn enough about programming so that I won't need to ask so many questions in the future and I'll just be able to develop my ideas.

Programming is awesome! If I ever decide to finish the thing I was working on I'll link to it or paste the code here. I'm working on a simple video game using the techniques I learned from drawing with Canvas and the mouse follower tutorial you posted. It's pretty exciting but it's very basic and simple because I am still new