CODEWITHSUNDEEP
javascripthtmlcanvas
jeff lockhart
jeff lockhart

Reputation: 25

How to plot points on canvas using html javascript

Here is my code: I am getting co-ordinates from aws mysql server and trying to parse it and plot the points on canvas.. What i am doing right now is plotting all the points but I want to plot points one by one so as to create a effect that someone is moving also I want to clear the previous point so that there is only 1 point on canvas. How to do this?

One way I think is to clear the canvas each time but then image gets cleared as well. so loading image again and again would not be good.

<!DOCTYPE html>
<html>
<body>


<img id="scream" src="imgbwb.jpg" alt="The Scream" width="960" height="576" style="display: none;">

<h1 id="demo">Plot the dots </h1>
<canvas id="myCanvas" width="1000" height="600" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas>

    <br>
    <h1> Data which i am plotting </h1>
    <br>

<?php
      $con=mysqli_connect("xxx.xx.us-west-2.rds.amazonaws.com","admin","xxx","xx");


   if (mysqli_connect_errno($con)) {
      echo "Failed to connect to MySQL: " . mysqli_connect_error();
   }

   $result = mysqli_query($con,"Select data from trailData order by id desc limit 10");

if ($result->num_rows > 0) {
$x=array();
$y=array();

while($row = $result->fetch_assoc()) {

$temp=$row["data"];
$myArray = explode('*', $temp);
//print_r($myArray);  

for($i=0;$i<count($myArray)-2;$i+=2)
{
    $a=$myArray[$i];
    $b=$myArray[$i+1];
    array_push($x,$a);
    array_push($y,$b);
}    
}
    echo "<h3>X co-ordinates</h3>";
    print_r($x);
    echo "<br>";  

    echo "<h3>Y co-ordinates</h3>";
    print_r($y);
}

else
{echo "0";}

?>

<!-- Script starts from here -->  
<script type="text/javascript">
//Simple header text change function on click
document.getElementById("demo").onclick = function() {myFunction()};
function myFunction() {
    document.getElementById("demo").innerHTML = "Don't click me you putang ina mo!";
}

// Actual canvas code
 var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img,10,10);    
    ctx.fillStyle="#FF0000"; 
    var xObj = <?php echo json_encode($x); ?>;
    var yObj = <?php echo json_encode($y); ?>;
    console.log(typeof(xObj));
    console.log(xObj);
    console.log(yObj);
    var i,x,y;

    for (i = 0; i < xObj.length; i++) {
  x = xObj[i];
  y = yObj[i];
  //ctx.fillRect(x,y,10,10);
   var centerX = x
      var centerY = y
      var radius = 10;

      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      ctx.fillStyle = 'green';
      ctx.fill();
      ctx.lineWidth = 2;
      ctx.strokeStyle = '#003300';
      ctx.stroke();
        setTimeout(function(){/* Look mah! No name! */},2000);

}
    //ctx.fillRect(780,580,10,10);

</script>

</body>
</html>

Upvotes: 1

Views: 1142

Answers (1)

airos
airos

Reputation: 752

You can get the movement effect by clearing the canvas and redrawing the points. But you could set the image as background for the canvas with CSS (instead of drawing it on the canvas) to avoid redrawing the image.

Upvotes: 1

Related Questions