mouse Hover Javascript

Question

I managed to do it with jquery, here’s the code for whoever needs it.

 <script type="text/javascript" src="dist/jquery/jquery-1.12.3.min.js"></script>
 <canvas id="diamond" width="100" height="100"></canvas>
    <script type="text/javascript">

        var canvas = document.getElementById("diamond");
        var context = canvas.getContext("2d"); 

    var diamond = function (x,y){
        context.beginPath();
        context.moveTo(25,15);   
        context.lineTo(40,25);
        context.lineTo(25,35);
        context.lineTo(10,25);     

        context.lineWidth = 1;
        context.fillStyle = "#F2673D";     

        context.closePath(); 

        context.fill();     
    }

    diamond();

    $(document).ready(function() {      

        $("#diamond").hover(function() {
            $(this).stop().animate({ marginTop: "-48px" }, 200);                        
        },function(){
            $(this).stop().animate({ marginTop: "-50px" }, 300);                        
        }); 

});
</script>

Answer 1

This is an example. Elaborate in more detail from it.

var canvas = document.getElementById("diamond");
var context = canvas.getContext("2d"); 

var diamond = function (x,y){
    x = x || 0;
    y = y || 0;
    context.beginPath();
    context.moveTo(25 + x,15 + y);   
    context.lineTo(40 + x,25 + y);
    context.lineTo(25 + x,35 + y);
    context.lineTo(10 + x,25 + y);     
    context.lineWidth = 0;
    context.fillStyle = "#F2673D";     
    context.closePath();     
    context.fill();     
}

function clearCanvas() {
    context.clearRect(0, 0, canvas.width, canvas.height);
}

function move(p){
  if (p < 200 ){
    setTimeout(function(){
      clearCanvas();
      diamond(p, p);    
      p += 10;
     move(p);
    }, 1000);
  }
}

move(10);

there’s an example running here:

https://jsfiddle.net/zLg27m9p/4/