title: no animation when connected to the MySQL database
body: <p>I am trying to move an object in html5 canvas based on the location of x and y axis retrieved from the MySQL database. The code was working when I did it without the database. But after connecting the page to the database, there is no movement.</p>
  
  <p>Please tell me where am I going wrong. Or is there any other way of doing it. </p>
  
  <p>Please do no suggest switching to PHP. </p>
  
  <p>index.jsp</p>
  
  <pre><code>&lt;%@page center code here`ontentType="text/html" pageEncoding="UTF-8"%&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;test&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
      &lt;style type="text/css"&gt;
         #canvas{
             border: #666 2px solid;
         }
      &lt;/style&gt;
      &lt;script type="text/javascript"&gt;
  
         function draw(x,y)
         {
            var canvas=document.getElementById('canvas');
            var ctx=canvas.getContext('2d');
            ctx.save();
            ctx.clearRect(0,0,550,400);
            ctx.fillStyle="rgba(0,200,0,1)";
            &lt;%@include file="connectToDB.jsp"%&gt;
            &lt;%
              int a,b;
              String sql="SELECT * FROM movement_details";
              try{
                 rs = stmt.executeQuery(sql);
                 while (rs.next()) 
                {
                   a=Integer.parseInt(rs.getString(4));
                   b=Integer.parseInt(rs.getString(5));
             %&gt;
              var x="&lt;%=a%&gt;";
              var y="&lt;%=b%&gt;";
  
              ctx.fillRect(x,y,30,30);
              ctx.restore();  
  
             setTimeout(100);
          &lt;%
               }
            }catch (Exception e) 
            {
              e.printStackTrace();
            }finally 
            {
                try { if (rs != null) rs.close(); } catch (SQLException e) { e.printStackTrace(); }
               try { if (stmt != null) stmt.close(); } catch (SQLException e) { e.printStackTrace(); }
               try { if (conn != null) conn.close(); } catch (SQLException e) { e.printStackTrace(); }
           }
           %&gt;
        }
  
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload="draw();"&gt;
      &lt;canvas id="canvas" width="550" height="400"&gt;&lt;/canvas&gt; 
  
      &lt;!--&lt;button onclick="draw('x','y');"&gt;Draw&lt;/button&gt;--&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the file where I connect the page to the database.</p>
  
  <p>connectToDB.jsp</p>
  
  <pre><code>&lt;%@page contentType="text/html" pageEncoding="UTF-8"%&gt;
  &lt;%@page import="java.sql.*" %&gt;
  &lt;%@page import="java.io.*" %&gt;
  &lt;%@page import="javax.sql.*" %&gt;
  &lt;%@page import="java.sql.Connection" %&gt;
  &lt;%  String str = " ";
      Connection conn = null;
      Statement stmt = null;
      ResultSet rs = null;
      //out.print(" "+session.getAttribute("empID"));
      Class.forName("com.mysql.jdbc.Driver").newInstance();
      String connectionUrl = "jdbc:mysql://localhost:3306/test2";
      String connectionUser = "root";
      String connectionPassword = "root";
      conn = DriverManager.getConnection(connectionUrl, connectionUser, connectionPassword);
      stmt = conn.createStatement();%&gt;
  </code></pre>